gpt4 book ai didi

javascript - 带有 $http 请求的 AngularJS 指令(inprog 错误)

转载 作者:行者123 更新时间:2023-11-28 12:32:14 25 4
gpt4 key购买 nike

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

我有一个单页应用程序,它具有非常相似的 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的query方法,传入了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 完成了这一切,但我重复了很多次,感觉不对。

最佳答案

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

由于您的指令没有模板,因此您不应使用隔离范围。而不是这样做:

scope: {}

你应该这样做:

scope: true

这将使指令创建一个范围但不会隔离它。这将使您的指令的范围可用于外部模板(即您的 ng-repeat)。

请记住这一点,如果您的指令中没有定义模板,则您几乎不应该使用隔离范围。

关于javascript - 带有 $http 请求的 AngularJS 指令(inprog 错误),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20896793/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com