帶有控制器數據綁定的Angular 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請求檢索的值未添加到指令中，並且在指令值中顯示“未定義”，並且沒有開始打印。

視圖代碼中指令下面的標記提供了引用此Codepen的檢索值： http ://codepen.io/TepigMC/pen/FIdHb

我在指令中缺少什么？

Answer 1

使用ng-if，以便在擁有$ scope.ratings之后調用該指令。

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