如何从ng-click指令调用控制器函数？

Question

我有两个指令和一个控制器，问题是我无法从我的指令中调用控制器的函数'addMarkers()'

我的代码如下：

derectives.js

app
.directive('collection', function () {
    var tpl = '<ul><member ng-repeat="member in collection" member="member"></member></ul>';
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '='
        },
        template: tpl
    }
})

app
.directive('member', function ($compile) {
    var tpl = '<li><a ng-click="addMarkers(member)" >{{member.title}}</a>'+
              '<input class="align" ng-if="!member.children" type="checkbox" ng-checked="true"/></li>';
    return {
        restrict: "E",
        replace: true,
        scope: {
            member: '=' 
        },
        template: tpl,
        link: function (scope, element, attrs) {
            if (angular.isArray(scope.member.children)) {
                element.append("<collection collection='member.children'></collection>"); 
                $compile(element.contents())(scope)
            }
        }



    }
})

controller.js

app
    .controller('IndexCtrl', function($scope, itemProvider){

    itemProvider.getItems().success(function(data){
     $scope.items  = data;
    });

   $scope.addMarkers = function(item){
         alert("Helloo");
        $scope.markers = itemProvider.addMarkers();
    }
   });

index.html

 <div id="menu" ng-controller="IndexCtrl">
   <nav>
    <h2><i class="fa fa-reorder"></i>All Categories</h2>
    <collection collection='items'></collection>
   </nav> 
</div>  

- Fadwa

---

由于您的指令正在创建隔离作用域，因此父作用域方法addMarker不可用。您可以将其作为参数传递给指令定义对象，在scope属性中使用&绑定。 - Chandermani

Answer 1

$rootScope是全局作用域，应仅在必要时使用。为了避免污染作用域变量，应尽可能保持干净。

为了从隔离的作用域中访问父方法，可以使用$parent服务，如下所示：

scope.$parent.addMarkers();

例子：基本例子

在您的情况下，想要访问父级的指令再次从另一个指令内部调用，因此对于这种情况，您可以使用$parent.$parent，

scope.$parent.$parent.addMarkers();如下所示：

例子：适用于您的案例的示例

如果使用父作用域的指令数量有限，则可以这样做。如果层次结构很长，则使用多个$parent会使代码笨拙。在这些情况下，最好将父方法添加到服务中，并从指令调用服务本身。

例子：服务示例

- Sukriti

Answer 2

我应该像下面这样使用 $rootScope，而不是 $scope：

$rootScope.addMarkers = function(item){
     alert("Helloo");
     $scope.markers = itemProvider.addMarkers();
}

- Prajapati Vikas