AngularJS:在包含的模板中,双向绑定不起作用。

20 浏览
0 Comments

AngularJS:在包含的模板中,双向绑定不起作用。

我觉得我在这里漏掉了一些简单(而且重要)的东西。我在使用一个包含一个映射到某个值的输入的包含模板:



控制器:

function Ctrl($scope) {    
   $scope.testvalue= "初始值";
}​

警报$scope.testvalue的值总是显示初始值,而不是更新后的值(当你在输入框中输入时)。帮帮我吧,奥比-旺·肯诺比。你是我们唯一的希望。

Fiddle: http://jsfiddle.net/h5aac/

0
0 Comments

问题的原因是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)

0
0 Comments

问题的原因是在绑定时使用了原始值而不是对象。原始值的值会被传递而不是对象的引用。如果使用对象而不是原始值,问题就会得到解决。在$scope中使用以下内容的对象即可:

$scope.foo = {testvalue: "initial value"};

解决方法参考链接:http://jsfiddle.net/h5aac/2/

此外,还有一些相关的解决方法链接:Using `ng-model` within a transcluded directive in AngularJSbinding issue when a directive in a ngRepeatAngularJS - updating scope value with asynchronous response

这并不是一个"bug",这只是JavaScript对象和原始值在传递时的工作原理。如果一个变量被设置为一个字符串并且将其传递给一个函数,该函数可以随意更改它,但它不会影响原始变量的值。如果该变量被设置为一个对象,那么传入的是引用,对其进行的任何更改都会影响原始变量引用的对象。希望能明白这个道理。

以上就是问题的原因和解决方法。

0