ngMessages不工作在指令模板内

我的ngMessages在我的指令模板中不起作用！ngMessages不工作在指令模板内

我有一个指令myInput带模板和链接功能，在模板函数里面我为包装的<label>和<input>创建模板字符串。

在链接功能中，我使用了FormController的require: '^form'并检索表单名称。然后我在包装元素之后放置一个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>

来源

2015-07-22 Lusk116

在LinkFunction中使用$ compile（html）（scope）不起作用 – Lusk116

代替将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);

来源

2015-07-23 13:33:42 Lusk116

您能添加完整的代码还是创建一个plnkr？我有同样的问题，我似乎无法修复它！ – keithm

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

我觉得这比在链接函数中打乱得多。

来源

2015-07-27 23:09:03

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

ngMessages不工作在指令模板内

回答

相关问题