Как вызвать функцию контроллера из директивы 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

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

Answer 1

следует использовать $ rootScope вместо $ рамки, как показано ниже,

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

Answer 2

$ rootScope является глобальный масштаб, который должен быть использован только при необходимости. Он должен быть максимально чистым, чтобы избежать загрязнения переменных сферы.

Для того, чтобы получить доступ к родительскому методу из изолированной сферы вы можете использовать $ родительской службу, как показано ниже:

scope.$parent.addMarkers(); 

пример: basic example

В вашем случае, директива, которая хочет получить доступ к родителю снова вызывается из внутри другой директивы, поэтому для таких случаев вы можете использовать $ родителя $ родителя,

scope.$parent.$parent.addMarkers();, как показано в следующем:.

пример: example for your case

Это можно сделать, если количество директив, использующих родительскую область, ограничено. Если иерархия длинная, то использование нескольких $ parent делает код неуклюжим. В этих случаях предпочтительно добавить родительский метод внутри службы и вызвать службу из директив.

Пример: service example