Javascript 变量更改后如何重新呈现指令？

我使用的是星级指令。但是在从HTTP加载数据之前加载模板。所以我想在HTTP请求成功后重新加载指令模板

HTML

JS

var-app=angular.module（'myapp'，[]）；
app.controller（“movieCtrl”，函数（$scope，$http）{
$scope.starting=0；
$scope.hoverRating=0；
$scope.mouseHover=函数（参数）{
$scope.hoverRating1=参数；
};
$scope.mouseLeave=函数（参数）{
$scope.hoverRating1=param+'*'；
};
//这里有问题
//通过http传输的实际数据
//当值更改时，我希望在指令模板下重新渲染
setTimeout（函数（）{
$scope.starting=5
}, 1000);
});
应用指令（'starting'，function（）{
返回{
范围：{
评级：'='，
maxRating:“@”，
只读：“@”，
单击“&”，
鼠标悬停：“&”，
鼠标：“和”
},
限制：“EA”，
模板：“\
\
",
编译：函数（元素、属性）{
如果（！attrs.maxRating | | |（Number（attrs.maxRating）这里有一个使用星号的简单评级指令，请注意逻辑在
链接中，而不是在控制器中

function starRating() {
  return {
    restrict: 'EA',
    template:
      '<ul class="star-rating" ng-class="{readonly: readonly}">' +
         // see ng-repeat here? this will update when scope.stars is updated
      '  <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
      '    <i class="fa fa-star"></i>' + // or &#9733
      '  </li>' +
      '</ul>',
    scope: {
      ratingValue: '=ngModel',
      max: '=?', // optional (default is 5)
      onRatingSelect: '&?', // callback
      readonly: '=?' // set whether this should be changeable or not
    },
    link: function(scope, element, attributes) {
      if (scope.max == undefined) {
        scope.max = 5;
      }
      function updateStars() { // update to rating value
        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();
        }
      });
    }
  };
}

函数星号（）{
返回{
限制：“EA”，
模板：
“
”+
//请参见此处的ng重复？当scope.stars更新时，这将更新
“
”+
''+//或★
“
”+
“
”，
范围：{
额定值：'=ngModel'，
max:“=？”，//可选（默认值为5）
onRatingSelect:“&？”，//回调
只读：“=？”//设置此值是否应可更改
},
链接：功能（范围、元素、属性）{
如果（scope.max==未定义）{
scope.max=5；
}
函数updateStars（）{//更新到额定值
scope.stars=[]；
对于（变量i=0；i
在
setTimeout
函数上使用$scope.$apply（），代码将正常工作

我还对你的代码做了简单的修改


我创建了一个服务来共享b/n控制器的数据
添加了一些$watch函数来检测值的变化


var-app=angular.module（'myapp'，[]）；
app.controller（“movieCtrl”，函数（$scope、$http、share）{
$scope.starting=0；
$scope.hoverRating=0；
$scope.mouseHover=函数（参数）{
$scope.hoverRating1=参数；
};
$scope.mouseLeave=函数（参数）{
$scope.hoverRating1=param+'*'；
};
$scope.$watch（'starting'，function（）{
share.rating=$scope.starting
});
setTimeout（函数（）{
log（'timeout set'）；
$scope.starting=5；
$scope.$apply（）；
}, 1000);
});
app.factory（'share'，function（）{
var obj={
评级：0
}
返回obj；
});
应用指令（'starting'，function（）{
返回{
范围：{
评级：'='，
maxRating:“@”，
只读：“@”，
单击“&”，
鼠标悬停：“&”，
鼠标：“和”
},
限制：“EA”，
templateUrl:“star1.html”，
编译：函数（元素、属性）{
如果（！attrs.maxRating | | |（Number（attrs.maxRating））带有指令，则该控制器将在该指令的所有实例中共享，从而使代码不正确（除非所有对象都具有相同的等级）。您应该将模板与scope.rating绑定，以便在您进行评级时获得模板更新的好处changes@SoluableNonagon指令使用的是隔离作用域，因此$scope对于指令控制器的每个实例都是不同的在链接函数中完成。我喜欢这种方法。当变量发生变化时，您可以使用
ng repeat
在变量发生变化时重新呈现DOM，而不是重新呈现指令。如果只有1项，您可以这样重复ng:
ng repeat=“myobject in[myobject]”
，并获得相同的重新呈现效果
var app = angular.module('myapp', []);
app.controller("movieCtrl", function($scope, $http) {

  $scope.starRating = 0;
  $scope.hoverRating = 0;


  $scope.mouseHover = function(param) {
    $scope.hoverRating1 = param;
  };

  $scope.mouseLeave = function(param) {

    $scope.hoverRating1 = param + '*';
  };
  //problem here
  //actual data coming via http
  //when value is changed i want to re-render below directive template
  setTimeout(function() {
    $scope.starRating = 5
  }, 1000);
});
app.directive('starRating', function() {
  return {
    scope: {
      rating: '=',
      maxRating: '@',
      readOnly: '@',
      click: "&",
      mouseHover: "&",
      mouseLeave: "&"
    },
    restrict: 'EA',
    template: "<div style='display: inline-block; margin: 0px; padding: 0px; cursor:pointer;' ng-repeat='idx in maxRatings track by $index'> \
                    <img ng-src='{{((hoverValue + _rating) <= $index) && \"http://www.codeproject.com/script/ratings/images/star-empty-lg.png\" || \"http://www.codeproject.com/script/ratings/images/star-fill-lg.png\"}}' \
                    ng-Click='isolatedClick($index + 1)' \
                    ng-mouseenter='isolatedMouseHover($index + 1)' \
                    ng-mouseleave='isolatedMouseLeave($index + 1)'></img> \
            </div>",
    compile: function(element, attrs) {
      if (!attrs.maxRating || (Number(attrs.maxRating) <= 0)) {
        attrs.maxRating = '5';
      };
    },
    controller: function($scope, $element, $attrs) {
      $scope.maxRatings = [];

      for (var i = 1; i <= $scope.maxRating; i++) {
        $scope.maxRatings.push({});
      };

      $scope._rating = $scope.rating;

      $scope.isolatedClick = function(param) {
        if ($scope.readOnly == 'true') return;

        $scope.rating = $scope._rating = param;
        $scope.hoverValue = 0;
        $scope.click({
          param: param
        });
      };

      $scope.isolatedMouseHover = function(param) {
        if ($scope.readOnly == 'true') return;

        $scope._rating = 0;
        $scope.hoverValue = param;
        $scope.mouseHover({
          param: param
        });
      };

      $scope.isolatedMouseLeave = function(param) {
        if ($scope.readOnly == 'true') return;

        $scope._rating = $scope.rating;
        $scope.hoverValue = 0;
        $scope.mouseLeave({
          param: param
        });
      };
    }
  };
});

function starRating() {
  return {
    restrict: 'EA',
    template:
      '<ul class="star-rating" ng-class="{readonly: readonly}">' +
         // see ng-repeat here? this will update when scope.stars is updated
      '  <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
      '    <i class="fa fa-star"></i>' + // or &#9733
      '  </li>' +
      '</ul>',
    scope: {
      ratingValue: '=ngModel',
      max: '=?', // optional (default is 5)
      onRatingSelect: '&?', // callback
      readonly: '=?' // set whether this should be changeable or not
    },
    link: function(scope, element, attributes) {
      if (scope.max == undefined) {
        scope.max = 5;
      }
      function updateStars() { // update to rating value
        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();
        }
      });
    }
  };
}