范围变量在angular指令链接函数中为null

Question

我在angularjs中打招呼。我有一个角度指令并使用它ASP.NET MVC项目：

'use strict';
app.directive('province', function (Province, $rootScope) {
return {
    restrict: 'E',
    replace: true,
    template: '<select data-ng-model="province" data-ng-options="province.provinceId as province.provinceName for province in provinces" ' +
        'data-ng-change="provinceChanged()"></select>',        
    link: function (scope, element, attr, controller) {            
        Province.get().then(function (provinces) {                
            scope.provinces = provinces;
        });
        console.log(scope.provinces);
        scope.province = false;            
        scope.provinceChanged = function () {
            if (!scope.province) {
                 return;
            }
            $rootScope.$broadcast("provinceChanged", { province: scope.province });
        };
    }        
};
})

这是我使用它的方式：

<province id="province" class="form-control" data-selected-province="@Model.Province"/>

选择元素显示省份。现在我想为select元素设置一个默认值。所以我使用属性data-selected-province并将其设置为我从服务器（@Model.Province）获得的值。我想我应该遍历scope.provinces并查找provinceId等于data-selected-province属性的省的索引，并将scope.province设置为ng-model到该索引。但是当我使用scope.provinces将其打印到控制台时，undefined为console.log。我有两个问题：

1. 为什么scope.provinces为空？
2. 这是正确的设置方式吗？ 默认值？

更新

我有点困惑。我唯一需要做的就是将scope.province设置为attr.selectedProvince。但我还是有问题。当我将scope.province设置为scope.province = 8这样的常数时，它可以正常工作，但是当我设置data-selected-province = 8时它不起作用。在渲染指令时，我可以在firebug中看到此属性等于8。

提前感谢任何帮助。

Answer 1

正如Ajay Beniwal在他的评论中所指出的，Provience.get()是一个异步操作，所以你需要将console.log移动到回调函数中以使其工作：

Province.get().then(function (provinces) {                
    scope.provinces = provinces;
    console.log(scope.provinces);
});

对于第二个问题，我建议您使用data-selected-province-id属性而不是data-selected-province，因为属性始终是字符串，简单的id值更容易处理。完成后，您可以在链接功能中尝试以下操作：

link: function(scope, element, attr) {
    ...

    scope.provience = attr.selectedProvienceId;

    ...
}