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不工作在指令模板內

回答

相關問題