AngularJs - методы ограниченной области действия недоступны в контроллере

Question

У меня есть директива, которая наследует ее область действия от контроллера. В этой Директиве есть несколько методов, когда я пытаюсь вызвать эти методы из родительского контроллера, он говорит, что метод не определен.

Родитель Контроллер:

app.controller('ParentController', ['$scope', function($scope){ 
    $scope.items = []; //Array of Objects. 
    $scope.someMethod = function(item){ 
     $scope.directiveMethod(item.id); 
    } 
}]); 

Директива:

app.directive('someDirective', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, el, attrs){ 
      scope.tableGreen = function(id){ 
       var element = angular.element('[data-cell='+id+']') 
       element.removeClass('some-class') 
       element.addClass('new-class') 
      } 
     } 
    } 
}) 

HTML:

<div ng-controller="ParentController"> 
    <div ng-repeat="item in items"> 
     <button ng-click="someMethod(item)" >Green</button> 
    </div> 

    <div ng-include="/path/to/some/place"> 
     <div class="some-class" some-directive></div> 
    </div> 
</div> 

Является ли это правильный подход? Или есть лучший способ?

Answer 1

Если вы пытаетесь переключить класс элемента срабатывает из-за пределов в ng-include один подход мог бы использовать ng-class на сам элемент:

<div ng-class="{'some-class': item.selected, 'new-class': !item.selected}">content</div> 

Это может избежать делать манипуляции класса с помощью другой функции и использовать встроенную угловую директиву, ng-класс (https://docs.angularjs.org/api/ng/directive/ngClass).

Если вам по-прежнему необходимо прикрепить другие функции к элементу, вы можете, конечно, включить ng-класс в шаблон директивы.

Возьмите этот plnkr, например: http://plnkr.co/edit/Jpr2ayywYYBwiIesmfko?p=preview, он имеет набор элементов в родительском контроллере, а затем ng-include, который ссылается на эти элементы. Класс изменяется на элементах внутри ng-include из их шаблонов директив с помощью ng-class.

Answer 2

Присвойте методу $ parent scope в директивной ссылке.

app.directive('someDirective', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, el, attrs){ 
      scope.$parent.directiveMethod = function(id){ 
       var element = angular.element('[data-cell='+id+']') 
       element.removeClass('some-class') 
       element.addClass('new-class') 
      } 
     } 
    } 
})