Javascript 通知变量已更改

我刚从Angular开始，有一个快速的问题：

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]');

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', function ($scope) {
    $scope.tenants = data;
}]);

setTimeout(function () {
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]');
    console.log("Poke Angular!");
}, 2000);

当我的变量数据发生变化时。如何让Angular更新模型

---

像这样应用于你的代码

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]');

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', function ($scope) {
    $scope.tenants = data;

  setTimeout(function () {
    $scope.tenants = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]');
    console.log("Poke Angular!");
     $scope.$apply();
}, 2000);

}]);

---

像这样应用于你的代码

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]');

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', function ($scope) {
    $scope.tenants = data;

  setTimeout(function () {
    $scope.tenants = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]');
    console.log("Poke Angular!");
     $scope.$apply();
}, 2000);

}]);

使用$timeout服务保持在

使用$timeout服务保持在

---

我找到了解决我问题的有效方法

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]');

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.tenants = data;
    $scope.getData = function (newData) {
        $scope.tenants = newData;
        $scope.$apply();
    };
}]);

setTimeout(function () {
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]');
    console.log("Poke Angular!");
    // Is this the best way to call Angular from outside scope?
    angular.element($('#control')).scope().getData(data);
}, 2000);

如果这可以通过直接呼叫控制器来改进，请让我知道

---

我找到了解决我问题的有效方法

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]');

angular.module('ngAppRentManager', []).
controller('RentCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.tenants = data;
    $scope.getData = function (newData) {
        $scope.tenants = newData;
        $scope.$apply();
    };
}]);

setTimeout(function () {
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]');
    console.log("Poke Angular!");
    // Is this the best way to call Angular from outside scope?
    angular.element($('#control')).scope().getData(data);
}, 2000);

如果这可以通过直接呼叫控制器来改进，请让我知道

您可以使用$scope.$watch：

您可以使用$scope.$watch：

---

---

请参阅$timeout服务。这将确保angular知道异步操作。或者调用$scope.apply以要求angular检查数据并更新绑定。@当前上下文中未定义Subin$scope，如何引用它？顺便说一句，我没有做任何异步操作，我只是在用户在文件输入中加载csv文件时更改数据。我应该换一种方式吗？检查更新我的答案通过@VasilVanchuksee$timeout service检查答案。这将确保angular知道异步操作。或者调用$scope.apply以要求angular检查数据并更新绑定。@当前上下文中未定义Subin$scope，如何引用它？顺便说一句，我没有做任何异步操作，我只是在用户在文件输入中加载csv文件时更改数据。我应该换一种方式吗？检查更新我的答案检查@VasilVanchukit does的答案-检查jsbin示例在我写下我的评论后，你更改了你的整个答案。在data=JSON.parse之前。。。下次你发帖时，请在发帖前检查你的代码，不要在发帖后检查…确实如此-检查jsbin示例在我写评论后你更改了你的整个答案。在data=JSON.parse之前。。。下次发帖时，请在发帖前检查您的代码，而不是在…JimmyRare的答案是正确的之后。使用angular….时无需使用id。。。。DOM操作和获取元素句柄都不应使用angularI来完成。实际上，超时没有任何用处。我想在控制器外部的函数解析CSV文件后更新我的视图。不要在angularI上下文中使用scope.apply，这使得附加到控制器作用域的方法从角度上不可用，因为它将抛出相位错误。因此，理想情况下，scope.apply必须在源代码处调用，而不是在受影响的函数中调用。也就是说，在您的情况下，您将在setTimeout中执行此操作。这个2秒的超时给了你什么？如果您的过程花费的时间更多，甚至更少，您会让用户等待吗？@PSL设置超时的唯一目的是模拟用户在某个点更改数据，与实际代码完全无关。但是您将如何使用$http获取数据？JimmyRare的回答是正确的。使用angular….时无需使用id。。。。DOM操作和获取元素句柄都不应使用angularI来完成。实际上，超时没有任何用处。我想在控制器外部的函数解析CSV文件后更新我的视图。不要在angularI上下文中使用scope.apply，这使得附加到控制器作用域的方法从角度上不可用，因为它将抛出相位错误。因此，理想情况下，scope.apply必须在源代码处调用，而不是在受影响的函数中调用。也就是说，在您的情况下，您将在setTimeout中执行此操作。这个2秒的超时给了你什么？如果您的过程花费的时间更多，甚至更少，您会让用户等待吗？@PSL设置超时的唯一目的是模拟用户在某一点上更改数据，与实际代码完全无关。但是您将如何使用$http获取数据？？