angularjs binden an Controller mit isolierten Bereich

Question

Ich habe eine ziemlich einfache Direktive und ich möchte die bindToController Option verwenden. So habe ich meine Anweisung wie folgt aus:

(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: '@' 
      } 
     }; 
    }; 
})(); 

Und dann habe ich mein Controller wie folgt aus:

(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 ------ ///////// 
    }; 
})(); 

Wenn ich diese Richtlinie verwenden, erhalte ich einen Fehler, der besagt:

Selbst .method ist keine Funktion

weshalb ich console.logging das controlle bin Um zu sehen, was daran gebunden ist. Sicher genug, die Methode und templateName fehlen. Ich habe ein paar Möglichkeiten versucht, dies zu Arbeit zu bekommen:

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

oder

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

aber nichts scheint zu funktionieren. Ich kann meinen isolierten Bereich nicht an meinen Controller binden ... Weiß jemand, was ich falsch mache?

PS: Ich bin mit Winkel 1.6.4

die Richtlinie verwenden ich dies tun:

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

Answer 1

Ok, so dass ich dachte dies. Der Umfang ist gebunden, aber nicht sofort verfügbar. Ich musste eine init Methode erstellen und sie von der Direktive aufrufen. Nur dann war alles gebunden. Ich habe es wie folgt aus:

(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(); 
      } 
     }; 
    }; 
})(); 

und der Controller sieht nun wie folgt aus:

(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(); 
      } 
     }; 
    }; 
})();