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();
          }
        });
      }
    };
  }

When initial value of $scope.ratings is number like 1,2,3 then starts prints but the value retrieved by ajax request is not getting added to directive and in directive values shows "undefined" and no starts getting printed.

视图代码中指令下方的标记给出了引用此 Codepen 的检索值：http://codepen.io/TepigMC/pen/FIdHb

指令中缺少什么？

Answer 1

使用 ng-if 以便在您拥有 $scope.ratings.

之后调用该指令

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

Angular 带有控制器数据绑定的 js 指令调用

Angular js directive call with controller data binding

angularjs

angularjs-directive

ionic-framework

ionic-view