当作用域改变时更新文本区域。

13 浏览
0 Comments

当作用域改变时更新文本区域。

我有一个文本区域，使用ng-list将数组中的元素分隔成单独的行。

我有一个按钮，当点击按钮时，它会将内容添加到names数组中，并希望这些内容也显示在文本区域中。


$scope.addPlayer = function() {
  $scope.names.push('HODOR' + n++);
}

不幸的是，即使在数组中仍然存储着更多的元素，文本区域也不会在添加更多元素时更新。有没有办法强制它发生呢？我尝试使用$scope.$apply，但没有效果。这里有一个 plunker 展示了这个错误。[https://plnkr.co/edit/gaLtvWw3Odhfngrhkitf?p=preview](https://plnkr.co/edit/gaLtvWw3Odhfngrhkitf?p=preview)

0

1 答案

0 Comments

问题的出现的原因是在AngularJS中，当使用指令（例如textarea）时，使用$scope.$apply方法无法更新作用域。AngularJS会在指令的作用域中查找变量，如果找不到，则会向上查找父作用域。当在textarea中更改文本时，AngularJS不会更改父作用域中的变量，而是在指令的作用域中创建一个新的变量，从而导致原始变量不会被更新。

解决方法是将data-ng-model属性中的"names"改为"$parent.names"。然而，这样做会完全断开textarea与数组的连接。为了解决这个问题，可以使用controllerAs语法来绑定控制器中的属性。

首先，在控制器中设置该属性的值：

angular.module('myApp').controller('MyController', function () {
    this.myText = 'Dummy text';
});

然后，使用controller as标识符将其直接绑定到控制器的属性：

0