如何使用来自外部源的数据更新 ng 模型

How to update ng-model with data from outer source?

本文关键字：数据 更新 ng 模型 何使用 外部      更新时间：2023-09-26

有以下问题。

考虑我们有以下 HTML 代码：

<div id="container" ng-controller="Controller">
    <my-tag ng-model="values"></my-tag>
</div>

以及以下控制器：

var Controller = myApp.controller("Controller", function ($scope, $http, $filter, $q) {
    $scope.values = [];
    $http.get(someURLHere).then(function(response) {
        var data = JSON.parse(response.data);
        $scope.values = data;
    });
        /* And so on ... */
});

这是指令声明：

myTag.directive('myTag', function() {
    return {
        require: "^ngModel",
        restrict: "E",
        replace: true,
        scope: {
            ngModel : "=",
        },
        controller: ['$scope', '$filter', myTagController],
        templateUrl: /* Here is a path to my template*/,        
        link: function (scope, elem, attrs, ctrl) {
            scope.data = scope.ngModel;         
        }
    }
});

标签"my-tag"是我的自定义指令。它通过ng-model获取一些数据并渲染它们。ng-controller="Controller"是一些函数，它使用 AJAX 检索一些数据，并假设将它们写入$scope.values。之后，我希望它们将通过ng-model="values"发送到my-tag。接下来，数据假设呈现在 HTML 页面上。但他们没有！我确实相信我的数据已在Controller中正确检索，但是在my-tag中更新ng模型存在问题。将Controller中检索到的数据"发送"到自定义指令的 ng-model 的最佳方法是什么？

仅在 $scope.apply（） 中更新范围变量。

代码示例：

var Controller = myApp.controller("Controller", function ($scope, $http, $filter, $q) {
            $scope.values = [];
            /*
                Getting values via AJAX - assigned to ajaxvalues
            */  
           //still in callback from ajax:
            $scope.$apply(function() {
              $scope.values = ajaxvalues;
            });
           //... end callback
        });

详见：http://docs.angularjs.org/api/ng.$rootScope.Scope

如果你对数据的更改没有反映在视图中，这几乎每次都是因为你在AngularJS框架之外做了一些事情。例如，这适用于事件处理程序，也适用于XMLHttpRequest的回调。所以我假设你正在使用后一个函数来获取你的数据。您可能需要检查AngularJS的$http服务，该服务将正确处理此问题。在回调中，您可以设置 scope 变量。但是因为AngularJS有一个很好的功能，叫做promises，你甚至可以做这样的事情：

$scope.values = $http.get('http://my.url/')
  .then(function(response){return response.data;});

这实际上会将承诺（稍后解决）绑定到 $scope.values，但由于 AngularJS 知道这是一个承诺，它不会尝试以任何方式显示它。稍后数据到达时，将调用.then函数，在此示例中，该函数仅从响应返回 JSON 数据。AngularJS将以正确的方式自动处理此问题，然后将JSON数据放入$scope.values。

如果你绝对需要或想要使用类似XMLHttpRequest的东西，或者有其他不是通过 AngularJS 触发的代码，你需要让 AngularJS 知道你正在通过把代码包装到$scope.$apply()中来改变范围，如下所示：

$scope.$apply(function(){
   $scope.values = response.data;
});
但是使用$http可能会更好。 一些包装器，

如 Restangular，或者如有必要，编写自己的包装器。如果你这样做，尝试使用承诺，如果它有意义，因为它将使代码更容易并且还可以重用。想象一下：

function makeRequest(id) {
  return $http.get('...some URL using id...')
     .then(function(response){return response.data;});
}
$scope.variable1 = makeRequest(1);
$scope.variable2 = makeRequest(5);
$scope.variable3 = makeRequest(7);

当然，您需要复杂的回调函数，知道将数据放在哪里。在这里，您的回调函数根本不需要关心，因为 AngularJS 及其承诺可以完成所有魔术。

相关文章：