Question

这是指令。我认为我的指令中缺少一些东西，可以让它知道$ scope中的变化。

'use strict';

 app.directive('backImg', function(){
        return function(scope, element, attrs) {
            var url = attrs.backImg;
            element.css({
                'background-image': 'url(' + url +')',
                'background-size' : 'cover'
            });
      };
 });

这是html

  <div back-img="{{url}}">
  </div>

在我的控制器中，我有

$scope.url = 'image/placeholder.jpg';

然后我还有一个更改$ scope.url值的按钮。

$scope.changeImage = function() {
    $scope.url = 'image/newimage.jpg';
}

我可以看到DOM中的变化但是显示的背景图像仍然显示旧图像，即placeholder.jpg。我在调用changeImage（）函数后注意到两个url都在DOM中。

<div back-img="http://localhost:9000/image/newimage.jpg" style="background-image: url(http://localhost:9000/image/placeholder.jpg); background-size: cover;">
</div>

Answer 1

我搞定了！哇噢！我正在学习指令！

app.directive('backImg', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      $scope.$watch('url', function(n, o) {
        console.log('checking .....', n, o);
        if (n) {
          console.log('changing');
          element.css({
            'background-image': 'url(' + attrs.backImg + ')',
            'background-size': 'cover'
          });
        }
      });
    }
  };
});

即使已修改范围变量，AngularJS指令也不会更改

1 个答案: