Угловые директивы, которые вызывают методы для дочерних директив

Question

Я ищу советы о том, как реализовать иерархическую структуру в Angular, где директива (<partition>) может вызывать метод на контроллере дочерней директивы (<property-value>).

Я собрал подробный пример здесь:
https://jsfiddle.net/95kjjxkh/1/

Как вы можете видеть, мой код содержит внешнюю директиву, <partition>, который отображает один или несколько <property-value> директивы внутри.

Директива <property-value> предлагает метод редактирования editItem(), который позволяет пользователю изменять значение одной записи. (Чтобы мой пример был коротким, я просто назначил случайное число здесь, но в моем рабочем приложении появится модальный запрос, чтобы запросить у пользователя новое значение.)

Это прекрасно работает. Однако во внешней директиве <partition> я хотел бы добавить возможность создать новую, пустую директиву <property-value>, а затем немедленно вызвать ее метод редактирования, чтобы пользователь мог ввести начальное значение. Если начальное значение не введено, новый элемент будет отброшен.

Я видел примеры внутренних директив, вызывающих методы приложения директив, но не наоборот.

Есть ли способ сделать это? В качестве альтернативы, есть ли лучший способ для меня построить такой вид?

Answer 1

Вы всегда можете использовать $ broadcast для разговора в обоих направлениях. Как для вашего родителя, так и для ваших детей.

Answer 2

В контроллере ребенка вы можете сделать следующее

app.directive('propertyValue', function() { 
return { 
    require : '^partition' 
    restrict: 'E', 
    scope: { 
     item: '=' 
    }, 

с этим вы получите родительский контроллер в функции потомственных директив как этот

link:function(scope,element,attrs,partitionCtrl){ 
    partitionCtrl.getChildCtrl(element) 
    } 

в контроллере раздела создать функцию getChildCtrl и с что вызов функции «propertyvalue»

controller: function ($scope, ItemFactory) { 
// your code 
var propValueCtrl =undefined; 
this.getChildCtrl =function(elem) 
{ 
    propValueCtrl = elem.controller(); 
} 
this.callChildFunction = function() 
{ 
    propValueCtrl.Edit();// whatever is the name of function 
} 

вызовите эту функцию, когда это необходимо в функции ссылки на свойства.

Надеюсь, это поможет.

Answer 3

Вы можете использовать $rootScope.$broadcast(); сделать это попробовать этот код контроллера и директивы:

var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
     return { 
      "restrict": "E", 
      "replace": true, 
      "scope": true, 
      "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>', 
      "link": function($scope, $elem, attrs) { 
        $elem.bind("click", function() { 
         $scope.checkboxChecked = !$scope.checkboxChecked; 
       }) 

     $scope.$on("changeCheckbox", function(event, args) { 
      $scope.checkboxChecked = !$scope.checkboxChecked; 
     }) 
     } 
    } 
}) 

app.controller("myController", function($scope, $rootScope) { 
    $scope.changeCheckbox = function() { 
     $scope.checkboxChecked = !$scope.checkboxChecked; 
     $rootScope.$broadcast('changeCheckbox', {}); 

    } 
}) 

Working Fiddle Demo