AngularJS指令与$http请求(进程错误)

Question

我已经为此搜索并尝试了很多方法，我想也许我只是做错了。

我有一个单页应用程序，它有非常相似的DOM片段，只是通过从服务提供给它们的数据来区分。每个DOM片段都有一个不同的web服务。

我的HTML看起来像这个

<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>

在我的真实例子中，差异更为显著，所以不，我不能把"成本"改为"名称"，并让它们完全相同。

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

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元素的section属性。所以，在我的例子中，"foo"或"bar"。

BaseProvider看起来像这样：

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]);
}
};
}]);

这一切都奏效了。我正在运行的是一个典型的指令问题-它不能及时到达$apply/$digest周期，因此当我在指令内部执行$scope.collection = response时，集合会被设置，但DOM不会更新。

因此，我尝试运行$scope.$apply()，但随后遇到$digest in progress错误。

http://docs.angularjs.org/error/$rootScope:inprog？p0=$digest

我试过了这些建议，但仍然有问题。在这一点上，我没有想法，也许我希望有一个可重复使用的指令和一个单一的提供者来驱动整个事情并不是一条路。

我用FooCtrl和BarCtrl完成了这一切，但我重复了很多次，感觉不对。

Answer 1

如果您使用的是angular 1.2.x或更高版本，则您的指令将不起作用，因为它使用的是隔离作用域。隔离作用域意味着分配给作用域的任何变量只能在作用域的内部模板(即使用template:属性在指令中定义的模板)中使用。

由于您的指令没有模板，因此不应使用隔离作用域。代替做：

scope: {}

你应该做：

scope: true

这将使指令创建一个作用域，但不隔离它。这将使外部模板(即ng重复)可以使用指令的作用域。

请记住，如果您的指令中没有定义模板，则几乎不应该使用隔离作用域。