0

我有以下html（可以直接访问或通过ajax调用）：

<section id="content" ng-controller="setTreeDataCtrl" get-subthemes>
<dl ng-repeat="subtheme in allSubthemes">
    <dt>{{subtheme.Title}}</dt>
</dl>

然后我使用以下指令：

myApp.directive('getSubthemes', function() {
return function($scope, element, attrs) {
    $scope.allSubthemes = [];
    angular.forEach($scope.data.Themes, function(value, key) {
        angular.forEach(value.SubThemes, function(value2, key2) {
            $scope.allSubthemes.push({
                'ThemeTitle': value.Title,
                'ThemeUrlSlug': value.UrlSlug,
                'Title': value2.Title,
                'UrlSlug': value2.UrlSlug
            });
        });
    });
}
});

$scope.allSubthemes 似乎没问题，但是 dl 没有被渲染。我可以看到一切都正确渲染，然后它又回到 {{subtheme.Title}}，几乎就像它正在“未渲染”......关于我做错了什么的任何想法？

演示 jsFiddle：http: //jsfiddle.net/HMp3a/

4

1 回答 1

0

rGil 修复了 jsFiddle。它缺少一个ng-app="pddc"元素的声明，所以 Angular 不知道从哪里开始它的魔力。

我想提一下另一种渲染相关数据的方法。我建议ng-repeat在ng-repeat. 在这里查看我的分叉和更新的小提琴。您实际上可以在子主题中引用父主题ng-repeat，因此您不必将父主题中的值复制到每个子主题中（这有效地消除了本示例中对指令的需要）。

使用嵌套的另一个原因ng-repeat是因为从 Web 服务异步提取数据时可能出现的异步问题。可能发生的情况是，当指令执行时，它可能没有任何数据可以循环和填充，因为数据尚未到达。

如果您使用两个 ng-repeats，Angular 将监视$scope.data并在数据到达时重新运行 ng-repeats。我在示例中添加了 500 毫秒的延迟来设置数据以模拟 Web 服务延迟，您会看到即使存在“延迟”，数据最终也会呈现。

解决异步问题还有其他两种方法：

  1. 在你的指令中使用scope.$watch()来手动观察数据，或者
  2. 使用 Angular路由功能中的“解析”功能来确保在控制器执行之前检索数据。

虽然这些替代方法有效，但我认为两者都比仅使用两个 ng-repeats 更复杂。

于 2013-07-14T00:01:53.047 回答