컨트롤러에서 ng-model에 액세스하고 업데이트하려면 어떻게합니까?

Question

그래서 나는이 각 지시어가 정의한 :

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 나를 정의되지 않은 제공, 아무것도 인쇄되지 않습니다. 왜 그렇게해서는 안되는지 나는 이해하지 못한다.

또한 templateUrl을 수행하는 방법을 파악할 수 없기 때문에이 템플릿을 사용하고 있습니다. 나중에 추측 할 수 있습니다.

Answer 1

컨트롤러에 newTag 속성이 바인딩되어 있지만 (vm) 템플릿에서는 ngModel을 컨트롤러가 아닌 범위 개체에 바인딩합니다.

올바른 코드는 다음과 같습니다

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

주, newTag 혼자 범위에 결합하면서 vm.newTag이 모델은 컨트롤러에 결합한다.