双向绑定，$手表，隔离范围不合群 [英] Two way binding, $watch, isolate scope not working together
问题描述
请参阅本捣鼓问题。 http://jsfiddle.net/AQR55/
1）为什么是连接到一个分离scope属性的手表 - 这是双向绑定到parent属性，不会触发更改父作用域属性。
。在小提琴，下面的文件档案化管理的手表是没有得到触发，在更改父scope属性其所约束。
$范围。$腕表（'行为'，函数（东西方妇女网络，旧）{
的console.log（东西方妇女网络）
}）
2） NG-点击=的addAction（）的addAction =的addAction（）。可这code以更优雅的方式放？因为，以执行隔离范围内的动作，看来我们需要设置双向绑定和连接到NG-点击。
3）我可以声明隔离范围内的方法如下所示？如果我这样做是这样，我得到的.js错误。
＆LT;分离范围的创造-CMP NG点击=isolateCmpClickHandler（）＆GT;＆LT; /分离范围的创造-CMP＆GT;
范围：{
isolateCmpClickHandler：功能（）{
//如果我做到这个样子，我得到的.js错误 }
}
问题1
既然你要添加到作用阵列的项目，你需要设置第三个参数中的 $腕表（）为true
$范围。$腕表（'行为'，函数（东西方妇女网络，旧）{
的console.log（东西方妇女网络）
}，真正的）;
演示：小提琴
问题2
既然是一个孤立的范围，你需要调用 $父示波器的功能
＆LT;输入类型=按钮BN =行动=行为NG点击=$ parent.addaction（）VALUE =添加操作/＆GT;
演示：小提琴
问题3：
当然可以，但你需要使用控制器
animateAppModule.directive（'亿'，函数（）{
返回{
限制：A，
范围： {
行为：'='
}，
链接：功能（$范围，iElement，iAttrs）{
$范围。$腕表（'行为'，函数（东西方妇女网络，旧）{
的console.log（东西方妇女网络）
}，真）
}，
控制器：函数（$范围）{
$ scope.dosomething =功能（）{
的console.log（'做点什么'）
}
}
}
}）
演示：小提琴
这是整体的解决方案可能看起来像
＆LT;输入类型=按钮BN =行动=行为的addAction =的addAction（）VALUE =添加操作/＆GT;
JS
animateAppModule.controller（'TST'，函数（$范围）{
$ scope.acts = [];
$ scope.addaction =功能（）{
$ scope.acts.push（{
答：A，B
}）
}
}）animateAppModule.directive（'亿'，函数（）{
返回{
限制：A，
范围： {
行为：'='，
的addAction：'和;'
}，
链接：功能（$范围，iElement，iAttrs）{
$范围。$腕表（'行为'，函数（东西方妇女网络，旧）{
的console.log（东西方妇女网络）
}，真正的）;
iElement.click（函数（）{
$范围。适用于$（'的addAction（））
}）
}
}
}）
演示：小提琴
Please refer to this fiddle for the questions. http://jsfiddle.net/AQR55/
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()". 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)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
}
}
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);
Demo: Fiddle
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" />
Demo: Fiddle
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')
}
}
}
})
Demo: Fiddle
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()')
})
}
}
})
Demo: Fiddle
这篇关于双向绑定，$手表，隔离范围不合群的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
