0

有以下问题。

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

4

2 回答 2

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

于 2013-10-15T14:28:38.060 回答
1

如果您对数据的更改没有反映在视图中，这几乎是每次都因为您在 AngularJS 框架之外进行操作。例如，这适用于事件处理程序，它适用于XMLHttpRequest. 所以我假设你正在使用后一个函数来获取你的数据。你可能想检查$httpAngularJS 的服务，它会正确处理这个问题。然后，您可以在回调中设置范围变量。但是因为 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 知道你正在通过将代码包装成$scope.$apply()这样来更改范围：

$scope.$apply(function(){
   $scope.values = response.data;
});

但是使用$http. 一些像 Restangular 这样的包装器，或者如果有必要编写你自己的包装器。如果您这样做，请尝试在有意义的情况下使用 Promise，因为它会使代码更容易且可重用。想象一下：

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 和它的 Promise 做了所有的魔法。

于 2013-10-15T14:41:54.667 回答