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-class（https://docs.angularjs.org/api/ng/directive/ngClass）。

如果您仍然需要为元素附加其他功能，您当然可以在指令模板中包含ng-class。

以此plnkr为例：http://plnkr.co/edit/Jpr2ayywYYBwiIesmfko?p=preview，它在父控制器中有一组项目，然后是引用这些项目的ng-include。使用ng-class从ng-include内的元素更改类的指令模板。

Answer 2

将方法分配给指令链接中的$ parent范围。

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')
           }
       }
   }
})

AngularJs - 控制器

2 个答案: