Angularjs 在渲染前需要远程数据的角度指令

我想创建一个

元素，其中其

由远程数据填充

看起来我的模板是在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>'
  }
});

myApp.directive（'dynamicSelect'，function（）{
返回{
范围：{
资料来源：“=”
},
链接：功能（范围、数据、属性）{
$.ajax({
方法：“获取”，
url:scope.source.url
}).完成（功能（响应）{
scope.options=response.options；
});
},
模板：“{option.name}}”
}
});

你做得不对。使用

• 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>'
  }
});

myApp.directive（'dynamicSelect'，函数（$http）{
返回{
范围：{
资料来源：“=”
},
链接：功能（范围、数据、属性）{
$http.get（scope.source.url）。然后（函数（响应）{
scope.options=response.data.options；
});
},
模板：“”
}
});

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

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

模板：“”

改用ng选项。请参阅列出的参考资料。有趣-您需要$http服务吗？是的，您需要将其注入指令中。感谢dfsq，仍在尝试填充它（现在它仍显示为空选择），因此我可以使用ng repeat，但不使用ng选项。ng选项是否需要ng型号？通过阅读ng选项文档，我不清楚这一点。是的，ngOptions需要ngModel，没有它就没有意义。我想说您无论如何都需要它，否则您将无法选择进一步传递数据的选项。