ngMessages निर्देश टेम्पलेट के अंदर काम नहीं करते

Question

मेरी ngMessages मेरे निर्देश टेम्पलेट के अंदर काम नहीं करता है!

मेरे पास टेम्पलेट और एक लिंक फ़ंक्शन के साथ एक टेम्पलेट और एक लिंक फ़ंक्शन के साथ myInput निर्देश है, मैं एक लपेटा <label> और <input> के लिए टेम्पलेट स्ट्रिंग बना देता हूं।

लिंक फ़ंक्शन के अंदर मैं 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> 

Answer 1

इसके बजाय ngMessages link समारोह के अंदर ब्लॉक को जोड़ने का है, यह compile समारोह के अंदर जोड़ें।

यह याद आ रही FormController की वजह से link funciton में के रूप में के रूप में आसान नहीं है, लेकिन यह काम करता है :-)

यहाँ कोड:

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

यहाँ मैं क्या किया है, मैं करने के लिए जोड़ा तो निर्देश के टेम्पलेट में गुंजाइश, myForm: '='<div ng-messages="vm.myForm[vm.id].$error" >

मुझे लगता है इस लिंक समारोह में चारों ओर mucking की तुलना में बहुत क्लीनर है करने के लिए भेजा।