如何在范围之外更改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️ 警告： 此答案较旧，不能反映最佳实践，并且可能与较新版本的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;
    });
}

在此Fiddle中尝试一下。

刚刚指出Angular在$digest()通话期间将只处理任何“监视”或“绑定”
。如果仅$scope直接修改直接对象的属性，则更改可能不会立即反映出来，并且可能会出现错误。

要触发此操作，您可以调用$scope.$apply()它将检查脏范围并更新正确绑定的任何内容。传递一个在内部起作用的函数$scope.$apply将使Angular也可以捕获任何异常。Scope文档中对此行为进行了说明。