AngularJS 指令 - 如何在异步数据加载后刷新模板答案

【问题标题】：AngularJS Directive - How to refresh template after async data loadAngularJS 指令 - 如何在异步数据加载后刷新模板
【发布时间】：2014-02-09 16:47:28
【问题描述】：

我从this question fork 和编辑了一个 plunker

我想要做的是让 SELECT 元素（组合框）在数据加载后更新/填充，但有些地方不对劲。我检索数据，它在 SELECT 元素的范围内，但模板没有刷新以显示数据。有人可以为我have a look 告诉我为什么模板不刷新吗？

非常感谢。

指令：

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<select data-ng-options="w.postalCode for w in walks"></select>',
    link: function(scope, element, attrs)
    {
      scope.$watch('walks', function (walks) {
                scope.walks = walks;
                console.log('watch triggered');
                console.log(scope.walks);


            });

    }
  };
});

Index.html：

<body ng-controller="MainCtrl">
    <h1>The Walks Data:</h1>
    <div walkmap="store.walks"></div>
  </body>

【问题讨论】：

标签： angularjs templates angularjs-directive refresh

【解决方案1】：

解决办法：

您不需要再观看一次，scope: { walks: '=walkmap' } 已经在观看了。
使用ngOptions 时，您也必须使用ngModel。
angularjs ng-options not working
Working with select using AngularJS's ng-options

这是plunker：

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<select ng-model="selected" data-ng-options="w.postalCode for w in walks"></select>'
  };
});

【讨论】：

【解决方案2】：

问题在于您的模板。你还没有定义一个非常重要的模型

这应该可以。

<select data-ng-model="w" data-ng-options="w.postalCode for w in walks"></select>

【讨论】：