如何在范围之外更改 AngularJS 数据? [英] How to change AngularJS data outside the scope?

问题描述

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

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

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

<小时>

HTML 代码:

<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 = {年龄:16};//创建模块var myApp = angular.module('myApp', []);myApp.factory('数据', function() {归还人；});函数 FirstCtrl($scope, Data) {$scope.data = 数据；}功能变化(){人.年龄 = 20;}

<小时>

当我现在按下更改为 20"按钮时，没有任何反应.如何通过 change 功能修改此人的年龄?

解决方案

⚠️ 警告:这个答案很旧，没有反映最佳实践，并且可能与较新版本的 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;});}

试试在这个小提琴.

Shaun 只是指出 Angular 只会在 $digest() 调用期间处理任何手表"或绑定".如果直接修改$scope的属性，可能不会立即反映出来，可能会出现bug.

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

After hours of frustrating searches I feel I need to submit my question here. I apologize in advance if this question is somehow answered before but none of my searches has helped so far. So here's my question:

My JavaScript code is creating an object, which is modified and monitored by AngularJS. On some events (like loading a previous setting of the object), I wish to change the properties of this object from outside the scope. The problem is that the inputs does not change...

Here's an example of how I wish to perform these changes:

---

HTML code:

<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 Code:

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;
}

---

When I now press the "Change to 20" button, nothing happens. How can I modify the person's age from the change function?

解决方案

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

MaxPRafferty's answer is correct - using a function in the scope is often the nicer way to do this - but there is another option. You can use the angular.element(...).scope() method to access an Angular scope from unrelated JavaScript. Select the top-level scope for the app by targeting the element that has the ng-app attribute specified, with something like in your click handler:

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

Try it out in this Fiddle.

Shaun just pointed out that Angular will only process any "watches" or "bindings" during a $digest() call. If you just modify the properties of the $scope directly, the changes may not be reflected immediately and you may gets bugs.

To trigger this you can call $scope.$apply() which will check for dirty scopes and update anything bound correctly. Passing a function that does the work inside $scope.$apply will allow Angular to catch any exceptions as well. This behaviour is explained in the documentation for Scope.

这篇关于如何在范围之外更改 AngularJS 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！