以$ http请求AngularJS指令（inprog错误） [英] AngularJS directive with $http requests (inprog error)

问题描述

我已经搜索并尝试了很多东西这一点，我想，也许我只是做是错误的。

I've searched and tried many things for this, and I think maybe Im just doing it wrong.

我有一个单页的应用程序，具有非常相似的DOM件，仅由在将它们从一个服务供给的数据来区分。每一块DOM都有不同的Web服务。

I have a single page app that has very similar DOM pieces, differentiated only by the data that is fed in to them from a service. Each DOM piece has a different web service.

我的HTML看起来像这样

My HTML looks something like this

<div section="foo">
    <ul>
        <li ng-repeat="item in collection">{{item.name}}</li>
    </ul>
</div>
<div section="bar">
    <ul>
        <li ng-repeat="item in collection">{{item.cost}}</li>
    </ul>
</div>

的区别是在我的真实的例子更戏剧性所以没有我不能只是改变'成本'到'名'，并让它们是相同的。

The differences are more dramatic in my real example so no I cant just change 'cost' to 'name' and have them be identical.

我有一个指令，看起来像这样：

I have a directive that looks like this:

angular.module("App").directive("section", ["BaseProvider", function(provider) {
    return {
        restrict: "A",
        scope: {},
        link: function($scope, element, attrs) {
            provider.query(attrs.section).success(function(response) {
                $scope.collection = response; // ** pay attention to this line **
            });
        }
    };
}]);

所以，它调用BaseProvider的查询方法，传入DOM元素的部分属性。因此，富或 - 在我的例子。

so, it calls the query method of BaseProvider, passing in the section attribute of the DOM element. so, "foo" or "bar" in my examples.

BaseProvider看起来是这样的：

BaseProvider looks something like this:

angular.module("App").factory("BaseProvider", ["$http", function($http) {
    var urls = {
        foo: "/something/foo.v1.json",
        bar: "/something/bar.v2.json"
    };

    return {
        query: function(base) {
            return $http.get(urls[base]);
        }
    };
}]);

这所有的作品。就是我在运行是典型的指令问题 - 它不让它在时间 $适用 / $消化周期，所以当我做 $ scope.collection =响应指令内，集合设置，但DOM不更新。

this all works. what i'm running in to is the typical directive problem - it does not make it in time for the $apply/$digest cycle and so when i do $scope.collection = response inside of the directive, the collection IS set, but the DOM does not update.

所以，我尝试运行 $范围。$适用（），但后来我到$运行消化正在进行中的错误。

so, I try to run $scope.$apply(), but then I run in to the $digest in progress error.

http://docs.angularjs.org/error/$rootScope ：？inprog P0 = $消化

我试过的建议，但我仍然有一个问题。我出的想法在这一点上，也许我希望有一个可重复使用的指令和一个单一的供应商带动整个事情是不是要走的路。

i've tried the suggestions, but am still having a problem. i'm out of ideas at this point and maybe my hope to have a reusable directive and a single provider driving the whole thing isn't the way to go.

我有这一切使用FooCtrl和BarCtrl工作，但我是在重复自己这么多次，它只是感觉不对。

i had this all working using a FooCtrl and a BarCtrl but I was repeating myself so many times it just felt wrong.

推荐答案

如果您使用的是棱角分明的1.2.x或以上，因为它使用的是分离范围的指令将无法正常工作。隔离范围，意味着分配给范围的任何变量只能从示波器的内部模板内（指使用模板中的指令定义模板中使用：属性

If you are using angular 1.2.x or above your directive will not work because it is using an isolate scope. Isolate scope means that any variable you assign to the scope can only be used from within the scope's internal template (meaning the template defined in the directive using the template: attribute.

由于您的指令没有一个模板，你不应该使用隔离范围。而不是做的：

Since your directive does not have a template, you should not use isolate scope. Instead of doing:

scope: {}

您应该做的：

scope: true

这将使该指令创建范围，但不是孤立它。这将提供给外部模板（即你的NG-重复）的指令的范围。

This will make the directive create a scope but not isolate it. This will make your directive's scope available to the outer template (i.e. your ng-repeat).

请记住这一点，如果你没有在你的指令，你应该很少使用分离范围内定义的模板做。

Keep this in mind, if you don't have a template defined in your directive you should hardly ever use an isolate scope.

这篇关于以$ http请求AngularJS指令（inprog错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！