2016-06-01 10 views
1

So habe ich diese Winkel Richtlinie definiert:Wie kann ich auf ng-model im Controller zugreifen und dieses aktualisieren?

angular.module('photoSynthesysApp') 
.directive('tagList', function(){ 
    return { 
    template: '<div class="tag-form"> <label> LABELS </label>'+ 

'<button class="btn-xsmall" ng-click="clicked = !clicked">+</button>' + 
'<div ng-show="clicked">'+ 
    '<input type="text" ng-model="newTag">  '+ 
    '<button ng-click="vm.addTag()"> Add </button>' + 
    '</div>'+ 
'<ul>'+ 
    '<div ng-repeat="tag in vm.tagListFromDatabase">' + 
    '<li>{{tag}}</li>' + '</div>'+ 
'</ul>'+ 
'</div>', 

controller: taggerController, 
controllerAs: "vm", 
restrict: "E" 
    } 
}); 

function taggerController() { 
    this.tagListFromDatabase = ["Bridges","Arches","Roads","Towers"]; 
    this.clicked="false"; 
    this.addTag = function(){ 
    this.tagListFromDatabase.push(this.newTag); 
    console.log(this.newTag); 
    }; 
} 

console.log gibt mir nicht definiert, der nichts drucken. Ich verstehe nicht, warum es nicht sollte.

Auch ich benutze Vorlage wie diese, weil ich nicht herausfinden konnte, wie TemplateUrl zu tun, aber ich kann das später herausfinden, denke ich.

Antwort

2

Sie versuchen, auf newTag Eigenschaft zuzugreifen, die an den Controller gebunden ist (vm). In der Vorlage binden Sie jedoch ngModel an das Oszilloskopobjekt, nicht an den Controller.

Korrekter Code wäre:

<input type="text" ng-model="vm.newTag"> 

Hinweis, vm.newTag bindet Modell, an das Steuergerät während newTag allein auf den Umfang bindet.

+1

Vielen Dank :) Das war sehr hilfreich. – McFiddlyWiddly