0

我为此搜索并尝试了很多东西，我想也许我只是做错了。

我有一个单页应用程序，它具有非常相似的 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 让这一切正常工作，但我重复自己很多次，感觉不对。

4

1 回答 1

6

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

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

scope: {}

你应该做：

scope: true

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

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

于 2014-01-03T06:15:22.087 回答