angularjsは隔離されたスコープのコントローラにバインドします

Question

私は非常に単純な指令を持っていますので、のbindToControllerオプションを使用します。だから、私はこのように私のディレクティブを作成しました：

(function() { 
    'use strict'; 

    angular.module('sapphire.directives').directive('list', list); 

    function list() { 
     return { 
      restrict: 'A', 
      template: '<div class="row flex-column" ng-class="{ \'spinner-dark\': controller.loading }" ng-include="controller.templateUrl" ng-if="controller.loading || controller.models.length"></div>', 
      controller: 'ListDirectiveController', 
      controllerAs: 'controller', 
      scope: true, 
      bindToController: { 
       method: '&list', 
       templateName: '@' 
      } 
     }; 
    }; 
})(); 

そして私はこのように私のコントローラを作成しました：

(function() { 
    'use strict'; 

    angular.module('sapphire.directives').controller('ListDirectiveController', listDirectiveController); 

    listDirectiveController.$inject = ['ListDirectiveService', 'Selections']; 

    function listDirectiveController(broadcast, selections) { 
     var self = this; 

     console.log(self); 

     // Bindings 
     self.limit = 0; 
     self.total = 0; 
     self.loading = true; 
     self.templateUrl = 'app/directives/lists/list/' + (self.templateName || 'list-default') + '.html'; 
     self.isSelected = selections.isSelected; 
     self.select = selections.select; 

     // Method binding 
     self.list = list; 

     init(); 

     ////////////////////////////////////////////////// 

     function init() { 
      list(); 
     }; 

     // Our list method 
     function list() { 

      // Set our initial limit 
      self.limit += 10; 
      self.loading = true; 

      // Get our items 
      return self.method({ limit: self.limit }).then(function (response) { 
       self.loading = false; 
       self.models = response; 
       self.total = response.length; 
      }); 
     }; 

     ///////// ------ Removed for brevity ------ ///////// 
    }; 
})(); 

を、私はこのディレクティブを使用する場合、私はというエラーを取得：

自己を.methodは関数ではありません

これは私がconsole.loggingしている理由です。 rそれに縛られているものを見る。確かに、メソッドとテンプレート名があります。 私は仕事にこれを取得するにはいくつかの方法を試してみました：

scope: { 
    method: '&list', 
    templateName: '@' 
}, 
bindToController: true 

または

scope: {}, 
bindToController: { 
    method: '&list', 
    templateName: '@' 
} 

が、何も動作するようです。私は私の隔離された範囲を私のコントローラにバインドすることができません.... 誰かが私は間違って何を知っていますか？

PS：私は、私はこれを行うディレクティブ使用するには、角1.6.4

を使用しています：

<div class="invisible-container" list="controller.listUsers(limit)" template-name="users"></div> 

Answer 1

[OK]をので、私はこれを考え出しました。スコープはバインドされていますが、すぐには使用できません。 のinitメソッドを作成し、そのディレクティブから呼び出す必要がありました。その時だけすべてが束縛されていた。 私はこのようにそれをやった：

(function() { 
    'use strict'; 

    angular.module('sapphire.directives').directive('list', list); 

    function list() { 
     return { 
      restrict: 'A', 
      template: '<div class="row flex-column" ng-class="{ \'spinner-dark\': controller.loading }" ng-include="controller.templateUrl" ng-if="controller.loading || controller.models.length"></div>', 
      controller: 'ListDirectiveController', 
      controllerAs: 'controller', 
      scope: { 
       method: '&list', 
       templateName: '@' 
      }, 
      bindToController: true, 
      link: function (scope, element, attrs, controller) { 
       controller.init(); 
      } 
     }; 
    }; 
})(); 

と、コントローラは次のようになります。あなたはこのディレクティブを使用しなかった

(function() { 
    'use strict'; 

    angular.module('sapphire.directives').controller('ListDirectiveController', listDirectiveController); 

    listDirectiveController.$inject = ['ListDirectiveService', 'Selections']; 

    function listDirectiveController(broadcast, selections) { 
     var self = this; 

     // Bindings 
     self.limit = 0; 
     self.total = 0; 
     self.loading = true; 
     self.isSelected = selections.isSelected; 
     self.select = selections.select; 

     // Method binding 
     self.init = init; 

     //////////////////////////////////////////////////// 

     function init() { 
      list(); 
      getTemplate(); 
      bindEvents(); 
     }; 

     function bindEvents() { 
      broadcast.onPrepend(onPrepend); 
      broadcast.onRefresh(onRefresh); 
     }; 

     function getTemplate() { 
      self.templateUrl = 'app/directives/lists/list/' + (self.templateName || 'list-default') + '.html'; 
     }; 

     function list() { 

      // Set our initial limit 
      self.limit += 10; 
      self.loading = true; 

      // Get our items 
      return self.method({ limit: self.limit }).then(function (response) { 
       self.loading = false; 
       self.models = response; 
       self.total = response.length; 
      }); 
     }; 

     function onPrepend(event, args) { 
      if (args && args.target && args.target === self.templateName) { 
       self.models.unshift(args.model); 
      } 
     }; 

     function onRefresh(event, args) { 
      if (args && args.target && args.target === self.templateName) { 
       self.limit -= 10; 
       self.models = []; 
       list(); 
      } 
     }; 
    }; 
})();