ngMessages 在指令模板中不起作用

Posted 2023-02-19

【中文标题】ngMessages 在指令模板中不起作用

【英文标题】：ngMessages dont work inside a directives template

【发布时间】：2015-10-11 21:25:23

【问题描述】：

我的 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>

【问题讨论】：

在 LinkFunction 中使用 $compile(html)(scope) 也不起作用

【参考方案1】：

不要将 ngMessages 块添加到 link 函数内，而是将其添加到 compile 函数内。

由于缺少FormController，它不像link 功能那样方便，但它可以工作:-)

代码如下：

    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);

【讨论】：

你能添加完整的代码或者创建一个 plnkr 吗？我有同样的问题，我似乎无法解决它！

【参考方案2】：

这是我所做的，我添加到范围内，myForm: '=' 然后在指令的模板中引用<div ng-messages="vm.myForm[vm.id].$error" >

我觉得这比在链接功能中胡闹要干净得多。

【讨论】：

我想添加尽可能少的属性。并一遍又一遍地添加具有相同值的相同属性，想象一个具有多达 25 个输入的表单（哦，是的，要求....），这是我不想要的。这就是我使用编译功能+添加检查表单标签是否存在的原因。