角度の指示子コントローラに値を渡す方法は？

Question

私のディレクティブにはコントローラーがあり、渡されたディレクティブの値を渡す方法を考えています。下の例では、 'name'はコンソールにポストされていませんが、レンダリング時にhtmlに表示されます。明らかに私の例は単純化されていますが、その点が分かります。

angular.module('myApp') 
 
    .directive('helpLabel', function() { 
 
     return { 
 
      restrict: 'E', 
 
      scope: { 
 
       name: '@', 
 
      }, 
 
      template: '<span>{{name}}</span>', 
 
      controller: function ($scope) {     
 
       console.log(name); 
 
      } 
 
     }; 
 
    });

<helpLabel name="test"></helpLabel>

Answer 1

私が見つけた答えは1.4角度今実効controllerAsとともにbindToControllerを使用することです。

angular.module('myApp') 
.directive('helpLabel', function() { 
    return { 
     restrict: 'E', 
     scope:{}, 
     bindToConroller: { 
      name: '@', 
     }, 
     template: '<span>{{cntrl.name}}</span>', 
     controller: function() {     
      console.log(cntrl.name); 
     }, 
     controllerAs: "cntrl" 
    }; 
}); 

http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Answer 2

それはHTMLにレンダリングされているとき、あなたは{{}}内の名前をカプセル化するためです。あなたのディレクティブ内でnameプロパティにアクセスすることができない場合は、コードを変更する必要があります。あなたのコード、console.log(name);で

angular.module('myApp') 
.directive('helpLabel', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      name: '@', 
     }, 
     template: '<span>{{name}}</span>', 
     controller: function ($scope) {     
      console.log($scope.name); 
     } 
    }; 
}); 

Answer 3

、変数nameはない、それをアクセスすることはできませんので、あなたのディレクティブと知られているが、角度いるので、それは{{name}}をレンダリングすることができ'name'変数への結合を行っています。

変数nameには、変数nameが現在のスコープ内に存在するため、$scope.nameとしてアクセスする必要があります。

angular.module('myApp') 
    .directive('helpLabel', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       name: '@', 
      }, 
      template: '<span>{{name}}</span>', 
      controller: function ($scope) {     
       console.log($scope.name); 
      } 
     }; 
    }); 

：

は、以下のようにコードを変更します