Dwukierunkowe wiązanie, $ zegarek, izolowanie zakresu nie działa razem

Question

Proszę odnieść się do tego skrzypce, aby uzyskać odpowiedzi na pytania. http://jsfiddle.net/AQR55/

1) Dlaczego zegarek dołączony do właściwości scope izolatu - który jest dwukierunkowo związany z właściwością macierzystą, nie jest wyzwalany przy zmianie właściwości rodzica.

W przypadku skrzypiec poniższy zegarek z określonymi wartościami nie jest wyzwalany po zmianie właściwości zakresu nadrzędnego, do którego jest związany.

$scope.$watch('acts', function(neww ,old){ 
        console.log(neww) 
       }) 

2) ng-click="addaction()" addaction="addaction()". Czy ten kod można umieścić w bardziej elegancki sposób? Ponieważ, aby wykonać akcję w odosobnionym zakresie, wydaje się, że musimy ustawić wiązanie dwukierunkowe i dołączyć do ng-click.

3) Czy mogę zadeklarować metody w odizolowanym zakresie, jak pokazano poniżej? Jeśli mi się to podoba, otrzymuję błąd .js.

<isolate-scope-creating-cmp ng-click="isolateCmpClickHandler()"></isolate-scope-creating-cmp> 
scope:{ 
    isolateCmpClickHandler:function(){ 
     //If i do like this, I'm getting .js error 

    } 
} 

Answer 1

Pytanie 1.
Od dodawania elementu do tablicy acts, trzeba ustawić trzeci parametr w $watch() do prawdziwej

$scope.$watch('acts', function (neww, old) { 
    console.log(neww) 
}, true); 

Demo: Fiddle

Pytanie 2
Ponieważ istnieje izolowany zakres, należy wywołać funkcję zakresu $parent w zakresie

<input type="button" bn="" acts="acts" ng-click="$parent.addaction()" value="Add Action" /> 

Demo: Fiddle

Pytanie 3.
Tak można, ale trzeba użyć kontrolera

animateAppModule.directive('bn', function() { 
    return { 
     restrict: "A", 
     scope: { 
      acts: '=' 
     }, 
     link: function ($scope, iElement, iAttrs) { 
      $scope.$watch('acts', function (neww, old) { 
       console.log(neww) 
      }, true) 
     }, 
     controller: function($scope){ 
      $scope.dosomething = function(){ 
       console.log('do something') 
      } 
     } 
    } 
}) 

Demo: Fiddle

Ogólnym rozwiązaniem mogłoby wyglądać

<input type="button" bn="" acts="acts" addaction="addaction()" value="Add Action" /> 

JS

animateAppModule.controller('tst', function ($scope) { 
    $scope.acts = []; 
    $scope.addaction = function() { 
     $scope.acts.push({ 
      a: "a,b" 
     }) 
    } 
}) 

animateAppModule.directive('bn', function() { 
    return { 
     restrict: "A", 
     scope: { 
      acts: '=', 
      addaction: '&' 
     }, 
     link: function ($scope, iElement, iAttrs) { 
      $scope.$watch('acts', function (neww, old) { 
       console.log(neww) 
      }, true); 
      iElement.click(function(){ 
       $scope.$apply('addaction()') 
      }) 
     } 
    } 
}) 

Demo: Fiddle