javascript - 如何在范围外更改 AngularJS 数据？

Question

经过几个小时令人沮丧的搜索，我觉得我需要在这里提交我的问题。如果之前以某种方式回答了这个问题，我提前道歉，但到目前为止我的搜索都没有帮助。所以这是我的问题:

我的 JavaScript 代码正在创建一个对象，该对象由 AngularJS 修改和监控。在某些事件中(比如加载对象的先前设置)，我希望从范围之外更改该对象的属性。问题是输入没有改变......

这是我希望如何执行这些更改的示例:

---

HTML代码:

<div ng-app="myApp" ng-controller="FirstCtrl">
<input type="number" ng-model="data.age">
<h1>{{data.age}}</h1>

<input type="button" value="Change to 20" ng-model="data" onclick="change()">

---

JavaScript 代码:

var person = {
    age: 16
};

// Create module
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
    return person;
});

function FirstCtrl($scope, Data) {
    $scope.data = Data;
}

function change() {
    person.age = 20;
}

---

当我现在按下“更改为 20”按钮时，没有任何反应。我如何从 change 函数修改此人的年龄？

Answer 1

⚠️ Warning: This answer is old, does not reflect best practices, and may not be compatible with newer versions of Angular.

MaxPRafferty 的回答是正确的 - 在范围内使用函数通常是更好的方法 - 但还有另一种选择。您可以使用 angular.element(...).scope() 方法从不相关的 JavaScript 访问 Angular 作用域。通过定位具有指定 ng-app 属性的元素来选择应用程序的顶级范围，在您的点击处理程序中使用类似的内容:

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();
    $scope.$apply(function() {
        $scope.data.age = 20;
    });
}

试一试 in this Fiddle .

Shaun just pointed out Angular 只会在 $digest() 调用期间处理任何“监视”或“绑定(bind)”。如果您只是直接修改 $scope 的属性，更改可能不会立即反射(reflect)出来，您可能会遇到错误。

要触发此操作，您可以调用 $scope.$apply()，它将检查脏作用域并更新任何正确绑定(bind)的内容。传递一个在 $scope.$apply 中完成工作的函数将允许 Angular 捕获任何异常。 the documentation for Scope 中解释了此行为.