angularjs dynamische templateurl Werte

Question

Ich versuche, eine "Name" -Richtlinie zu erstellen, die sowohl Vor- als auch Nachnamen hosten kann.

der Code i haben derzeit ist:

index.html

<div data-dm-name label="First Name:" info="first_name"></div> 
<div data-dm-name label="Last Name:" info="last_name"></div> 

Richtlinie:

angular 
    .module('app.names.directive',[]) 
    .directive('dmName', [ directive ]) 

function directive() { 
    return { 
     restrict: 'E', 
     scope: { 
      label: '=', 
      info: '=' 
     }, 
     templateUrl: '/assets/components/name_template.html' 
    }; 
} 

name_template.html

<div class="wizard-form-group"> 
    <div class="input-group"> 
     <label class="wizard-form-label" for="info"> 
      {{ label }} 
     </label> 
     <span class="input-field" 
       data-ng-class="{ 
        error: form.info.$dirty && 
         form.info.$invalid, 
        focused: form.info.$focused 
       }" 
      > 
      <input 
       type="text" 
       name="info" 
       id="info" 
       data-ng-model="info" 
       data-ng-required="true" 
       data-ng-focus="form.info.$focused = true" 
       data-ng-blur="form.info.$focused = false" 
      /> 
     </span> 
    </div> 
</div> 

Mein Problem ist, dass ich don Scheint es nicht können Übergeben Sie die Werte für Label und Info in die Vorlagendatei. Was mache ich falsch?

Ich habe gerade angefangen mit eckigen, also hoffentlich hat dies eine einfache Lösung.

Vielen Dank im Voraus

Answer 1

in Ihrer Richtlinie Funktion, um eine Link-Funktion

function directive() { 
return { 
    restrict: 'EA', 
    scope: { 
     label: '=', 
     info: '=' 
    }, 
    templateUrl: '/assets/components/name_template.html', 
    link : function($scope, element, attrs){ 
     if(attrs.label){ 
     $scope.label = attrs.label 
     } 
     if(attrs.info){ 
     $scope.info = attrs.info 
     } 
    } 
    }; 
} 

Answer 2

Ihre Richtlinie Element hinzufügen beschränkt ist, aber Sie verwenden sie als Attribut. Sie sind also nicht auf das Element einwirken.

Sie sollten die DDO ändern zu:

function directive() { 
    return { 
    restrict: 'A', // attribute allowed 
    scope: { 
     label: '=', 
     info: '=' 
    }, 
    templateUrl: '/assets/components/name_template.html' 
    }; 
}