分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – ngMessages在指令模板中不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我的ngmessages在我的指令模板中不起作用！

我有一个带有模板和链接函数的指令myInput,在模板函数中我为包装的< label>创建了模板字符串.和< input>.

在Link函数内部,我使用require：’^ form’FormController并检索表单名称.然后我在包装元素之后放置一个ngmessages块.

(function () {
        'use Strict';

        angular
            .module('app.components')
            .directive('myInput',MyInput);

        /*@ngInject*/
        function MyInput($compile,Validatorservice,_,LIST_OF_VALIDATORS) {
            return {
                require: '^form',reStrict: 'E',controller: MyInputController,controllerAs: 'vm',bindToController: true,template: TemplateFunction,scope: {
                    label: '@',id: '@',value: '=',validateCustom: '&'
                },link: MyInputLink

            };

            function MyInputController($attrs) {
                var vm = this;
                vm.value = '';
                vm.validateClass = '';
                vm.successmessage = '';
                vm.errormessage = '';
            }

            function TemplateFunction(tElement,tAttrs) {
                return '<div class="input-field">' +
                    '   <label id="input_{{vm.id}}_label" for="input_{{vm.id}}" >{{vm.label}}</label>' +
                    '   <input id="input_{{vm.id}}" name="{{vm.id}}" ng-class="vm.validateClass" type="text" ng-model="vm.value" >' +
                    '</div>';

            }

            function MyInputLink(scope,element,attrs,form){
                var extra = '   <div ng-messages="' + form.$name + '.' + scope.vm.id + '.$error">' +
                    '       <div ng-messages-include="/modules/components/validationmessages.html"></div>' +
                    '   </div>';
                $(element).after(extra);
            }
        }
    })();

用法：

<h1>Test</h1>
    <form name="myForm">
        <my-input label="My Input" id="input1" value="vm.input1"></my-input>

        -------

        <!-- this block is hardcoded and is working,it does not come from the directive! -->
        <div ng-messages="myForm.input1.$error">
            <div ng-messages-include="/modules/components/validationmessages.html"></div>
        </div>

    </form>

解决方法

不是在链接函数中添加ngmessages块,而是在compile函数中添加它.

由于缺少FormController,它不像链接功能那样方便,但它的工作原理:-)

这里的代码：

compile: function(tElement,tAttrs){
        var name = tElement.closest('form').attr('name'),fullFieldName = name + '.' + tAttrs.id; // or tAttrs.name
        var extra = '<div ng-messages="' + fullFieldName + '.$error">' +
                    '    <div ng-messages-include="/modules/components/validationmessages.html"></div>' +
                    '</div>';
        $(element).after(extra);