ngMessaggi non funzionano all'interno di un modello di direttive

Question

My ngMessages non funziona nel mio modello di direttive!

Ho una direttiva myInput con un modello e una funzione di collegamento, all'interno della funzione di modello creo la stringa di modello per un <label> e <input>.

All'interno della funzione Link uso il formController require: '^form' e recuperare il nome del modulo. Quindi sto mettendo un blocco ngMessages dopo gli elementi avvolti.

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

utilizzati:

<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

Invece di aggiungere i ngMessages bloccano all'interno della funzione link, inserirlo all'interno della funzione compile.

Non è maneggevole come nel link funciton a causa della mancanza FormController, ma funziona :-)

Ecco il codice:

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

Ecco quello che ho fatto, ho aggiunto a scope, myForm: '=' quindi nel modello della direttiva riferito a <div ng-messages="vm.myForm[vm.id].$error" >

Ritengo che questo sia molto più pulito rispetto alla funzione di collegamento.