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

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

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

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

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

3) Могу ли я объявить методы внутри изолированной области видимости, как показано ниже? Если мне это нравится, я получаю ошибку .js.

Ответы

Ответ 1

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

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

Демо: 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" />

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