2016-07-05 18 views
1

私はangularjsに少し戸口です。私はディレクティブを書いていますが、bindToControllerの動作を理解できません。私はこの有用な記事http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.htmlを読んでいますが、なぜ私は未定義の次の例で理解できません。ディレクティブのバインドが定義されていません

.directive('firstDirective', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     bindToController: { 
      directiveInput:'=' 
     }, 
     templateUrl: 'components/directive-tree/directive-tree.html', 
     controllerAs: 'directiveTreeCtrl', 
     controller: function($scope, $uibModal){ 
      var self = this; 
      self.selected = null; 
      console.log(self.directiveInput); //HERE IS THE UNDEFINED 
      $scope.modalOptions = { 
       windowClass: 'semi-modal', 
      } 

      this.openDirectiveModal = function(object, index) { 
       //Other irrelevant code 
      } 
     } 
    } 
}); 

その後、私はHTMLテンプレートの入力を問題なく使用できます。 HTMLテンプレートで、私はdirectiveInputを使用することができますし、それが正しい値と私はconsole.logでインスタンスの「未定義」を見せて、なぜ

<ul> 
    <li ng-repeat="object in directiveTreeCtrl.directiveInput"> 
     {{object.Id}}&emsp;{{object.Name}} 
    </li> 
</ul> 

多分それは愚かな質問です。あなたは一般的に

+1

'<最初のディレクティブ>'と表示されます。 [Official angular directive documentation](https://docs.angularjs.org/guide/directive)はより完全です –

+0

@TomShen私は正しく使用しています。私が持っている唯一の疑念は、なぜ私はそのconsole.log()で定義されていない取得し、私はそれをレンダリングするときに、そのオブジェクトを使用することができます – acostela

答えて

1

をありがとう、私はこれがそうのように見える達成するために書くコード:今すぐ

.directive('firstDirective', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      directiveInput:'=' 
     }, 
     bindToController: true, 
     templateUrl: 'components/directive-tree/directive-tree.html', 
     controllerAs: 'directiveTreeCtrl', 
     controller: function($scope, $uibModal){ 
      var self = this; 
      self.selected = null; 
      console.log(self.directiveInput); //HERE IS THE UNDEFINED 
      $scope.modalOptions = { 
       windowClass: 'semi-modal', 
      } 

      this.openDirectiveModal = function(object, index) { 
       //Other irrelevant code 
      } 
     } 
    } 
}); 

あなたはこのようなあなたのディレクティブを使用する必要があるHTML

<first-directive directive-input="inputObject"></first-directive> 
+0

私はそれを使用する方法について疑問はありません。私の質問は別です。なぜconsole.logがUNDEFINEDを印刷しているのか、その後にHTMLがオブジェクトを正しく描画しているのです。 – acostela

関連する問題