Как передать объект из вложенной директивы с изолированной областью в область родительского контроллера в угловом

Question

У меня есть директивное древовидное представление, которое содержит вложенную директиву (являющуюся ветвями) каждого отображаемого элемента.

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

filter: '&' // связывает фильтр метода внутри вложенной директивы (ветви) с методом doSomething() в атрибуте директивы дерева, который привязан к директиве html, которая привязывается к контроллеру.

iobj: '=' - это двухсторонний связывающий параметр, который должен передавать объект с областью в контроллер. (Но в настоящее время не является)

Директива:

app.directive('tree', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src', 
      filter: '&', 
      iobj: '=' 
     }, 
     controller: 'treeController', 
     template: '<ul><branch ng-repeat="c in t.children" iobj="object" src="c" filter="doSomething()"></branch></ul>' 
    }; 
}); 

app.directive('branch', function($compile) { 

    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      b: '=src', 
      filter: '&', 
      iobj: '=' 
     }, 

     template: '<li><input type="checkbox" ng-click="innerCall()" ng-hide="visible" /><a>{{ b.name }}</a></li>', 
     link: function (scope, element, attrs) { 
      var has_children = angular.isArray(scope.b.children); 
      scope.visible = has_children; 
      if (has_children) { 
       element.append('<tree src="b"></tree>'); 
       $compile(element.contents())(scope); 
      } 
      element.on('click', function(event) { 
       event.stopPropagation(); 
       if (has_children) { 
        element.toggleClass('collapsed'); 
       } 
      }); 
      scope.innerCall = function() { 
       scope.iobj = scope.b; 

       console.log(scope.iobj); 
       scope.filter(); 
      } 
     } 
    }; 
}); 

HTML:

<div ng-controller="treeController"> 
    <tree src="myList" iobj="object" filter="doSomething()"></tree> 

    <a ng-click="clicked()"> link</a> 
</div> 

Контроллер:

app.controller("treeController", ['$scope', function($scope) { 
    var vm = this; 

    $scope.object = {}; 
    $scope.doSomething = function() { 
     var item = $scope.object; 
     //alert('call from directive'); 
     console.log(item); 
    } 

    $scope.clicked = function() { 
     alert('clicked'); 
    } 
... 

В настоящее время я может вызвать функцию $scope.doSomething из директивы к контроллеру. Поэтому я знаю, что у меня есть доступ к области контроллеров из директивы. Я не могу понять, как передать объект в качестве параметра из директивы обратно в контроллер. Когда я запускаю этот код, $scope.object всегда пуст.

Буду признателен за любую помощь или предложения относительно того, как это сделать.

Answer 1

Директива по привязке & поддерживает передачу параметров. Учитывая ваш пример

scope.filter({message: 'Hello', anotherMessage: 'Good'}) 

В message и anotherMessage становятся локальными переменными в выражении, связанного с директивой:

<tree src="myList" iobj="object" filter="doSomething(anotherMessage, message)"></tree> 

Вот пример plunker где параметры обратного вызова устанавливаются внутри шаблона.

documentation четко говорится, что:

Часто желательно передавать данные из изолированного объема с помощью выражения в родительской области, это может быть сделано путем передачи карты имен локальных переменных и значений в оболочку выражения fn. Например, для , если выражение равно increment(amount), тогда мы можем указать значение , вызывая localFn как localFn({amount: 22}).