Двусторонняя переплетная, $ watch, изолированная область не работает вместе

Question

Пожалуйста, обратитесь к этой скрипке для вопросов. http://jsfiddle.net/AQR55/

1) Почему часы, прикрепленные к свойству изоляционной области видимости, двунаправленно привязанные к родительскому свойству, не запускают изменение свойства родительской области.

В скрипке часы, показанные ниже, не срабатывают при изменении свойства родительской области, к которому он привязан.

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

2) ng-click="addaction()" addaction="addaction()". Может ли этот код быть более элегантным? Поскольку для выполнения действия в изолированной области видимости нам нужно установить двунаправленную привязку и привязать к ng-click.

3) Могу ли я объявить методы в изолированном объеме, как показано ниже? Если мне это нравится, я получаю ошибку .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

Вопрос 1.
Поскольку вы добавляете элемент в acts массива, вам необходимо установить третий параметр в $watch() к истинному

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

Demo: Fiddle

Вопрос 2 .
Поскольку существует изолированный объем, вам необходимо вызвать функцию области $parent

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

Демо: Fiddle

Вопрос 3.
Да, вы можете, но вы должны использовать контроллер

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

Демо: Fiddle

Общее решение может выглядеть следующим образом

<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()') 
      }) 
     } 
    } 
}) 

Демонстрация: Fiddle