angularjs – 双向绑定,$watch,隔离范围不能一起工作

发布时间：2020-12-17 07:46:40 所属栏目：安全来源：网络整理

导读：请参考这个小提琴的问题. http://jsfiddle.net/AQR55/ 1)为什么附加到隔离范围属性的手表 – 双向绑定到父属性,在更改父范围属性时不会触发. 在小提琴中,下面的表格手表没有被触发,改变了它所绑定的父画幅属性. $scope.$watch('acts',function(neww,old){ co

请参考这个小提琴的问题. http://jsfiddle.net/AQR55/

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

在小提琴中,下面的表格手表没有被触发,改变了它所绑定的父画幅属性.

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

2)ng-click =“addaction()”addaction =“addaction()”.这段代码可以更优雅吗？因为,要在隔离的范围内执行操作,似乎我们需要设置双向绑定和附加到ng点击.

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

    }
}

问题1.
由于您将一个项目添加到actions数组,因此您需要将 $watch()中的第三个参数设置为true

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

演示：Fiddle

问题2.
由于有一个隔离的范围,您需要调用$parent scope的函数

<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',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',scope: {
            acts: '=',addaction: '&'
        },true);
            iElement.click(function(){
                $scope.$apply('addaction()')
            })
        }
    }
})

演示：Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!