コントローラの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にアクセスしようとしていますが、テンプレートではngModelをコントローラではなくスコープオブジェクトにバインドします。

正しいコードは次のようになります

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

注、newTagのみスコープに結合しながらvm.newTagは、モデルは、コントローラに結合します。