Question

分叉并编辑了一个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>

Answer 1

解决方案：

您不需要另一个$ watch，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>'
  };
});

Answer 2

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

这应该有效。

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

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

2 个答案:

解决方案：