ngMessages không hoạt động bên trong một mẫu chỉ thị

Question

My ngMessages không hoạt động bên trong mẫu chỉ thị của tôi!

Tôi có chỉ thị myInput với mẫu và hàm liên kết, bên trong hàm mẫu Tôi tạo chuỗi mẫu cho một gói <label> và <input>.

Bên trong hàm Liên kết, tôi sử dụng require: '^form' FormController và truy xuất tên biểu mẫu. Sau đó, tôi đặt một khối ngMessages sau các phần tử được bao bọc.

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

Cách sử dụng:

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

Answer 1

Thay vì thêm các ngMessages chặn bên trong link chức năng, thêm nó vào bên trong compile chức năng.

Nó không phải là như tiện dụng như trong link funciton vì sự thiếu FormController, nhưng nó hoạt động :-)

Đây mã:

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

Answer 2

Dưới đây là những gì tôi đã làm, tôi thêm vào phạm vi, myForm: '=' sau đó trong mẫu của chỉ thị được gọi là <div ng-messages="vm.myForm[vm.id].$error" >

Tôi cảm thấy điều này sạch hơn nhiều so với việc nhét xung quanh trong hàm liên kết.