AngularJS:在包含的模板中,双向绑定不起作用。
AngularJS:在包含的模板中,双向绑定不起作用。
我觉得我在这里漏掉了一些简单(而且重要)的东西。我在使用一个包含一个映射到某个值的输入的包含模板:
控制器:
function Ctrl($scope) { $scope.testvalue= "初始值"; }
警报$scope.testvalue的值总是显示初始值,而不是更新后的值(当你在输入框中输入时)。帮帮我吧,奥比-旺·肯诺比。你是我们唯一的希望。
Fiddle: http://jsfiddle.net/h5aac/
问题的原因是ng-include创建了一个子作用域,而ng-model绑定的是子作用域的属性,而不是父作用域的属性。解决方法是使用$parent来访问父作用域中的属性。
代码示例:
这样就可以将模型绑定到父作用域的属性上了。
另外,还可以通过在模板中添加一段代码来查看子作用域的情况:
show scope
并在控制器中添加以下代码:
$scope.showScope = function(e) { console.log(angular.element(e.srcElement).scope()); }
在输入框中输入内容之前,点击"show scope"链接,可以在控制台中展开"Child"作用域,发现它还没有包含名为testvalue的属性。清空控制台,然后在输入框中输入内容,再次点击"show scope"链接,就会发现"Child"作用域中出现了一个新的testvalue属性,它覆盖了父作用域中的同名属性。因此,在子作用域中可以看到子作用域的testvalue属性,而在父作用域中可以看到父作用域的testvalue属性。
参考链接:
[What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/14049482#14049482)
问题的原因是在绑定时使用了原始值而不是对象。原始值的值会被传递而不是对象的引用。如果使用对象而不是原始值,问题就会得到解决。在$scope中使用以下内容的对象即可:
$scope.foo = {testvalue: "initial value"};
解决方法参考链接:http://jsfiddle.net/h5aac/2/
此外,还有一些相关的解决方法链接:Using `ng-model` within a transcluded directive in AngularJS、binding issue when a directive in a ngRepeat、AngularJS - updating scope value with asynchronous response。
这并不是一个"bug",这只是JavaScript对象和原始值在传递时的工作原理。如果一个变量被设置为一个字符串并且将其传递给一个函数,该函数可以随意更改它,但它不会影响原始变量的值。如果该变量被设置为一个对象,那么传入的是引用,对其进行的任何更改都会影响原始变量引用的对象。希望能明白这个道理。
以上就是问题的原因和解决方法。