Angular js指令属性未附加到指令范围

Question

我试图通过元素属性传递和参数到一个指令 下面是一个片段：

指令

app.directive('bgFluct', function(){
  var _ = {};
  _.scope = {
    data: "@ngData"
  }
  _.link = function(scope, elem, attr) {

    // if there is no image provided use pp.png the default
       scope.background = scope.data !== undefined ? scope.data : '../../img/pp.png'
    elem.css(
      {
        'background': 'url('+scope.background+')',
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
        'background-position': 'center center'
      })
  }
  return _;
})

HTML

<div class="four columns" style="margin-right: 20px;">
  <div class="row">
    <div ng-data="{{ vm.background_image }}" class="project-item" bg-fluct>
    </div>
  </div>
</div>

在我的指令console.log(scope)中打印：

主要问题 scope有一个数据属性（截图如下），但我无法通过scope.data

访问它

我一次又一次地查看了我的整个代码，但仍无法找到解决此问题的方法。

如何从指令属性访问ng-data属性？

干杯！

Answer 1

您的问题的一个简单解决方案是使用$ timeout，通过将代码包装在超时中，您可以为摘要循环执行和初始化属性：

$timeout(function() {
    scope.background = scope.data !== undefined ? scope.data : '../../img/pp.png'
    elem.css(
      {
        'background': 'url('+scope.background+')',
        'background-size': 'cover',
        'background-repeat': 'no-repeat',
        'background-position': 'center center'
      });
}, 0); // <== 0 timeout or some if it didn't work

另一种解决方案可能是在您的属性上注册观察者：

scope.$watch('data', function(data){/* the same as the previous example */})