Jak przekazać obiekt z dyrektywy zagnieżdżonej z izolowanym zasięgiem do zakresu kontrolera nadrzędnego w kanciastym

Question

Mam widok drzewa dyrektywy zawierający dyrektywę zagnieżdżoną (będącą gałęzią) każdego renderowanego elementu.

W zakresie obu dyrektyw zadeklarowałem dwa parametry, które powinny rozmawiać z kontrolerem nadrzędnym.

filter: '&' // wiąże filtr metody w zagnieżdżonej dyrektywy (oddziału) do doSomething() metoda w atrybucie drzewa dyrektywy, która jest związana z dyrektywą HTML, który wiąże się z kontrolerem.

iobj: '=' jest dwukierunkowym parametrem wiążącym, który powinien przekazać obiekt o ustalonym zakresie do kontrolera. (Ale obecnie nie jest)

dyrektywa:

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> 

Kontroler:

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

Obecnie może wywołać funkcję $scope.doSomething z dyrektywy do kontrolera. Wiem więc, że mam dostęp do zakresu kontrolerów z dyrektywy. Czego nie mogę zrozumieć, to jak przekazać obiekt jako parametr z dyrektywy z powrotem do kontrolera. Gdy uruchamiam ten kod, zawsze jest pusty obiekt.

Byłbym wdzięczny za pomoc lub sugestie, jak to zrobić.

Answer 1

Powiązanie dyrektyw & obsługuje przekazywanie parametrów. Podane Twój przykład

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

W message i anotherMessage stają się zmienne lokalne w ekspresji związanej z dyrektywą:

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

Oto próbka plunker gdzie parametry wywołania zwrotnego są ustawione wewnątrz szablonu.

documentation wyraźnie stwierdza, że:

Często jest pożądane, aby przekazać dane z wyodrębnionego zakresu poprzez ekspresji do zakresu nadrzędnego, można to zrobić poprzez przepuszczenie mapę lokalnych nazw zmiennych i wartości w opakowaniu wyrażeń fn. W przypadku przykładu , jeśli wyrażenie to jest increment(amount), możemy określić wartość , wywołując localFn jako localFn({amount: 22}).