角JS指令呼叫與控制器的數據綁定

Question

查看

<star-rating ratingValue="ratings" readonly="true"></star-rating> 
<div><strong>Rating 1:</strong>{{ratings}}</div> 

控制器

app.controller('ProductCtrl', function ($scope, $http, $ionicSlideBoxDelegate, $resource, $state, $stateParams, $rootScope, $compile, $ionicPopup, $location, $sce) { 
     $scope.ratings = 0; 
     this.isReadonly = true; 
     this.rateFunction = function(rating) { 
      console.log('Rating selected: ' + rating); 
     }; 

     $http.defaults.useXDomain = true; 
     $http.get(web_service + 'product/get', { 
      params: {id: $stateParams.ProductId}, 
      headers: {} 
     }).success(function (response) { 
      $scope.product = response.product; 
      console.log(response.product); 
      $ionicSlideBoxDelegate.update(); 
      $scope.ratings = response.product.rating; 
      this.rateFunction = function(rating) { 
       console.log('Rating selected: ' + rating); 
      }; 
     }) 
     .error(function (err) { 
      alert("ERROR"); 
     }); 

    }).directive('starRating', starRating); 

指令

function starRating() { 

    return { 
     restrict: 'EA', 
     template: 
     '<ul class="star-rating" ng-class="{readonly: readonly}">' + 
     ' <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' + 
     ' <i class="ion-ios-star"></i>' + // or &#9733 
     ' </li>' + 
     '</ul>', 
     scope: { 
     ratingValue: '=?', 
     max: '=?', // optional (default is 5) 
     onRatingSelect: '&?', 
     readonly: '=?' 
     }, 
     link: function(scope, element, attributes) { 
     if (scope.max == undefined) { 
      scope.max = 5; 
     } 
     scope.$observe('ratingValue', function(value){ 
      console.log(value); 
      //$scope.nav.selection = value 
     }); 
     function updateStars() { 
      scope.stars = []; 
      for (var i = 0; i < scope.max; i++) { 
      scope.stars.push({ 
       filled: i < scope.ratingValue 
      }); 
      } 
     }; 
     scope.toggle = function(index) { 
      if (scope.readonly == undefined || scope.readonly === false){ 
      scope.ratingValue = index + 1; 
      scope.onRatingSelect({ 
       rating: index + 1 
      }); 
      } 
     }; 
     scope.$watch('ratingValue', function(oldValue, newValue) { 
      if (newValue) { 
      updateStars(); 
      } 
     }); 
     } 
    }; 
    } 

當$ scope.ratings的初始值爲1,2,3等數字時，則開始打印，但由ajax請求檢索的值未被添加到指令中，並且在指令值中顯示「undefined」並且no開始獲取打印。

下方查看代碼指令的標籤使檢索到的值指的是這個Codepen：http://codepen.io/TepigMC/pen/FIdHb

我所缺少的指令？

Answer 1

使用ng-if以便在$ scope.ratings之後調用該指令。

<star-rating ng-if="ratings" ratingValue="ratings" readonly="true"></star-rating>