javascript - Angular Directive(指令)中的绑定(bind)属性为空

Question

我有一个简单的指令

'use strict';

angular.module('ludaooApp')
  .directive('rating', function () {
    return {
      templateUrl: 'app/rating/rating.html',
      restrict: 'EA',
      link: function (scope, element, attrs) {
          scope.mark = attrs.mark;
          console.log(attrs);
    };
  })

该指令只记录指令的属性。

下面是我如何使用该指令:

<rating mark="{{game.rating}}" style="font-size: 30px"></rating>

这是网络检查员的结果:

如您所见，第一行的 mark="" 标记为空。但之后，它被填充了它的值 mark="4.16"。

结果是，如果我 console.log(scope.mark)，我看到的是 0 而不是 4.16。

我认为这是因为 4.16 是从数据库中检索的，并且代码是在 {{game.rating}} 在 Controller 中初始化之前执行的。

那么问题来了，如何处理这个问题呢？以及如何访问“4.16”？

Answer 1

尝试在服务中使用 Angular promise ，从 api 接收数据，并将延迟对象的状态传递给 ng-if - 这个决定可以帮助搁置评级指令的呈现。

简单的例子:

<div ng-app="ludaooApp">
  <div ng-controller="GameCtrl as game">
    <rating mark="{{game.rating}}" ng-if="game.$promise.status"></rating>
  </div>
</div>


 (function(angular){
   "use strict";

   angular.module('ludaooApp',[])
   .controller('GameCtrl', ['$timeout', '$q', function($timeout, $q){
        var game = this;
        var deferred = $q.defer()
        game.$promise = deferred.promise.$$state
        $timeout(function(){
            game.rating = 4.16;
            deferred.resolve();
        },3);    
    }])
    .directive('rating', function () {
       return {     
          restrict: 'EA',      
          link: function (scope, element, attrs) {
             scope.mark = scope.$eval(attrs.mark);
             console.log(attrs);
       }
      };
    })
 })(window.angular);

JSFiddle