Question

我想创建一个<select>元素，其中<option>是从远程数据中填充的。

看起来我的模板在ajax调用完成之前就已经呈现了。

在获取所需数据之前，如何确保我的模板不会呈现？

myApp.directive('dynamicSelect', function(){
  return {
    scope: {
      source: "="
    },
    link: function(scope, data, attrs){
      $.ajax({
        method: "GET",
        url: scope.source.url
      }).done(function(response){
        scope.options = response.options;
      });
    },
    template: '<select><option ng-repeat="option in scope.options" value="{{ option.value }}">{{ option.name }}</option></select>'
  }
});

Answer 1

你做得不对。使用

ngOptions指令填充选项。
$http服务加载数据并自动触发摘要更新。
考虑添加ngModel进行选择。

然后该指令将会显示：

myApp.directive('dynamicSelect', function($http) {
  return {
    scope: {
      source: "="
    },
    link: function(scope, data, attrs) {
      $http.get(scope.source.url).then(function(response) {
        scope.options = response.data.options;  
      });
    },
    template: '<select ' +
      'ng-model="selected" ' +
      'ng-options="option.value as option.name for option in options"></select>'
  }
});

Answer 2

您可以使用ng-show指令隐藏组件，直到通过ajax请求填充数据。

template: '<select ' +
      'ng-model="selected"' +
      'ng-show="scope.options"'+
      'ng-options="option.value as option.name for option in options"></select>'

Angular指令，在呈现之前需要远程数据

2 个答案: