Question

有以下问题。

请考虑我们有以下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。之后，我希望他们会通过my-tag发送到ng-model="values"。接下来，数据假设在HTML页面上呈现。但他们没有！我相信我的数据已在Controller中正确检索，但在my-tag更新ng-model时出现问题。将Controller中检索到的数据“发送”到我的自定义指令的ng-model的最佳方法是什么？

Answer 1

仅在$ 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

Answer 2

如果您对数据的更改未反映在视图中，那么实际上每次都是因为您在AngularJS框架之外执行了操作。例如，这适用于事件处理程序，它适用于XMLHttpRequest的回调。所以我假设你使用后一个函数来获取数据。您可能需要检查AngularJS的$http服务，它将正确处理此问题。在回调中，您可以设置范围变量。但是因为AngularJS有一个名为promises的好功能，你甚至可以这样做：

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

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

如果你绝对需要或想要使用像XMLHttpRequest这样的东西，或者有其他不是通过AngularJS触发的代码，你需要让AngularJS知道你正在通过将代码包装到{来对范围进行更改{1}}像这样：

$scope.$apply()

但是使用$scope.$apply(function(){ $scope.values = response.data; });可能会更好。像Restangular一样包装它或者必要时编写自己的包装器。如果你这样做，尝试使用promises，如果它有意义，因为它将使代码更容易，也可以重用。想象一下：

$http

很明显，你需要复杂的回调函数来知道放置数据的位置。在这里你的回调函数根本不需要关心，因为AngularJS及其承诺可以完成所有的魔法。

如何使用外部数据更新ng-model？

2 个答案: