2016-02-02 6 views
0

Я следую учебникам joe eames по множественному количеству. Это выглядит довольно просто. Я устанавливаю одну директиву внутри другой, а настройку * требует: на детском контроллере *Доступ к контроллеру из отдельной директивы, вызывающей неожиданные ошибки

Вот код, который у меня есть из демонстрации. Я использую угловое 1.5. Я не изменил $ scope на контроллер. Поскольку я сосредоточен на выяснении связи между контроллерами директивы.

(function() { 
'use strict'; 
angular 
    .module('app', []) 
    .controller('mainCtrl', function($scope) { 

    }) 

    .directive('swTabstrip', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: function($scope) { 
       $scope.panes = []; 
       $scope.select = function(pane) { 
        pane.selected = true; 
        $scope.panes.forEach(function(curPane) { 
         if(curPane !== pane) { 
          curPane.selected = false; 
         } 
        }) 
       } 

       this.addPane = function(pane) { 
        $scope.panes.push(pane); 
        if($scope.panes.length ===1) { 
         pane.selected = true; 
        } 
       } 
      }, 
      templateUrl: 'swTabstrip.html' 
     } 
    }) 

    .directive('swPane', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: { 
       title: '@' 
      }, 
      require: '^swTabstrip', 
      link: function(scope, el, attrs, tabstripCtrl) { 
       tabstripCtrl.addPane(scope); 
      }, 
      templateUrl: 'swPane.html' 

     } 
    }) 
})(); 

Учебник требует, чтобы я установить директиву swPane требовать «swTabstrip». Тем не менее, я получаю сообщение об ошибке в консоли

3angular.js:13156 Error: [$compile:ctreq] 

Controller 'swTabstrip', required by directive 'swPane', can't be found!

+0

Свойство 'require' дает директиву _controllers_. В вашем примере у вас есть _directive_, называемый swTabstrip. [Прочтите этот раздел документации] (https://docs.angularjs.org/guide/directive#creating-directives-that-communicate). –

ответ

2

Вы должны реально создать tabstripCtrl, который использует ваша директива и в то же время, то вы можете передать его в:

(function() { 
    'use strict'; 
    angular 
     .module('app', []) 
     .controller('mainCtrl', function ($scope) {}) 
     .controller('tabstripCtrl', function($scope) { 
      $scope.panes = []; 
      $scope.select = function (pane) { 
       pane.selected = true; 
       $scope.panes.forEach(function (curPane) { 
        if (curPane !== pane) { 
         curPane.selected = false; 
        } 
       }) 
      } 

      this.addPane = function (pane) { 
       $scope.panes.push(pane); 
       if ($scope.panes.length === 1) { 
        pane.selected = true; 
       } 
      } 
     }) 
     .directive('swTabstrip', function() { 
      return { 
       restrict : 'E', 
       transclude : true, 
       scope : {}, 
       controller : 'tabstripCtrl' , 
       templateUrl : 'swTabstrip.html' 
      } 
     }) 
     .directive('swPane', function() { 
      return { 
       restrict : 'E', 
       transclude : true, 
       scope : { 
        title : '@' 
       }, 
       require : '^tabstripCtrl', 
       link : function (scope, el, attrs, tabstripCtrl) { 
        tabstripCtrl.addPane(scope); 
       }, 
       templateUrl : 'swPane.html' 

      } 
     }) 
})(); 

Если вы пытаетесь обмениваться данными между вашими директивами, изучите сервисы.

+0

Спасибо, что имеет смысл. В реальном проекте я бы использовал сервис, я просто следую учебнику, чтобы лучше понять связь между директивами. – Winnemucca

Смежные вопросы