指令的交互与ajax异步出现的问题

我们知道如果不给指令设置scope得话我们的指令的scope是跟父scope一致的

这个有一个好处

就是如果我们要把一个模型作为指令的属性的参数传递给质量是ok的，所以我们编写公用的指令，不知道父指令用有什么属性的时候就不设置就好了

但是，如果我们父指令中的某个模型是在ajax异步请求以后才完成的，那么因为我们的指令已经渲染成功了，如果我们的这个传入的属性是决定指令渲染的，那么我们的指令的渲染就不会再次改变，导致失效

.directive('star',
function () {
// 星级评分指令
return {
template: "<i class=\"icon ion-ios-star\" ng-repeat=\"
star in stars\"></i>",
// scope:{"="},
link: function ($scope,
element, attrs) {
// 设置star的次数
console.log($scope);
$scope.stars = [];
console.log(attrs.stars);
while (attrs.stars) {
$scope.stars.push({});
attrs.stars--;
}
}
}
})

现在有一个星级评分的指令

如果我们是使用

他的父scope是这样的

unction ($scope,
$http, $ionicLoading) {
$scope.weatherInfo = {};
$ionicLoading.show();
$http.get('http://localhost:8100/views/weather/weather.json').success(function
(data) {
$scope.weatherInfo =
data;
$ionicLoading.hide();
}).error(function () {
console.log("error");
$ionicLoading.hide();
});

如果我们是用

<star
stars="{{weatherInfo.recommendationRate}}"></star>

因为指令的渲染先于ajax

所以最后的时候我们的指令接受到的stars是空的

也就渲染不出来

但是如果是

<star
stars="{{weatherInfo.recommendationRate}}"
ng-if="weatherInfo.recommendationRate"></star>

那么得话

一开始的时候因为是空，所以不渲染，等到ajax结束以后，属性不是空了

就渲染了

因此，问题得到解决