双向绑定，浅$ watch，隔离范围不能一起使用 [英] Two way binding, shallow $watch, isolate scope not working together

问题描述

有关问题，请参阅此小提琴. http://jsfiddle.net/AQR55/

Please refer to this fiddle for the questions. http://jsfiddle.net/AQR55/

1)为什么附加到隔离范围属性(双向绑定到父属性)的手表在更改父范围属性时不会触发.

1) Why a watch that is attached to an isolate scope property - which is bidirectionally bound to a parent property, is not triggering on changing the parent scope property.

在小提琴中，更改其绑定的父范围属性时，不会触发以下提及的手表.

In the fiddle, the below metioned watch is not getting triggered, on changing the parent scope property to which it is bound.

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

2)ng-click="addaction()" addaction="addaction()".可以以更优雅的方式放置此代码吗?因为，要在孤立的范围内执行操作，似乎我们需要设置双向绑定并将其附加到ng-click.

2) ng-click="addaction()" addaction="addaction()". Can this code be put in more elegant way? Because, to perform an action in isolated scope, it seems we need to set bidirectional binding and the attach to ng-click.

3)我可以在如下所示的隔离范围内声明方法吗?如果我这样做，将会收到.js错误.

3)Can i declare methods inside the isolated scope like shown below? If i do like this, I'm getting .js error.

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

    }
}

推荐答案

问题1.
由于您要向acts数组添加项目，因此需要在将$ watch()设置为true

Question 1.
Since you are adding a item to the acts array, you need to set the third parameter in $watch() to true

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

演示:小提琴

问题2.
由于存在隔离范围，因此您需要调用$parent范围的函数

Question 2.
Since there is an isolated scope, you need to call the $parent scope's function

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

演示:小提琴

问题3.
是的，可以，但是您需要使用控制器

Question 3.
Yes you can, but you need to use a controller

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

演示:小提琴

整体解决方案可能看起来像

An overall solution could look like

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

演示:小提琴

这篇关于双向绑定，浅$ watch，隔离范围不能一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！