angular 指令中的绑定属性为空

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}} 在控制器中初始化之前执行的。

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

Answer 1

尝试在服务中使用 angular promises，它从 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

Answer 2

我相信你的指令是在你的 {{game.rating}} 完成绑定之前创建的。

尝试使用 ngAttr 以便仅在绑定完成后定义您的属性：

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

Answer 3

我认为 Enver 的解决方案可能有效，但过于复杂。问题是game.rating读取时没有完全绑定导致的。一个更简单的解决方案是等到 game.rating 的绑定完全完成并赋值给 mark 属性，如下：

link: function (scope, element, attrs) {
    attrs.$observe("mark", function(value) {
        // read "mark" here
        console.log(attrs.mark);
    });
};

angular 指令中的绑定属性为空

Bound attribute empty in an angular directive

javascript

asynchronous

directive

angularjs