Question

HTML：

    <div class="has-bg" back-img="{{currentCoverImg}}" style="min-height: 1000px">
    ......
    </div>

我在这里看到post说正确的方法将数据绑定到指令并在我的代码中使用它。 backImg指令如下所示：

    .directive('backImg', function () {
    return {
        scope: {
            bg: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('bg', function () {
                var url = attrs.backImg;
                element.css({
                    'background-image': 'url(../img/' + url + ')'
                });
            })

        }
    }

})

它调出背景图像只在页面初始化时设置了一次。稍后我更改值currentCoverImg多次，而背景图像从未更新过。

UPDATE1 我选择使用指令而不是ng-style是因为我需要在css更改上做一些动画。比如element.addClass("ng-hide-remove");，看起来指令是实现这一目标的可行方法。

Answer 1

如您所说back-img="currentCoverImg"（双向绑定），将属性更改为=而不进行插值。此外，应该在bg属性中放置，因为您在隔离范围中定义了bg属性。

<强>标记

<div class="has-bg" 
  back-img="currentCoverImg" 
  bg="currentCoverImg"
  style="min-height: 1000px">
    ......
</div>

然后使用newValue回调函数中的$watch获取当前的udpated值。

scope.$watch('bg', function (url) { //new updated URL value
    element.css({
        'background-image': 'url(../img/' + url + ')'
    });
});

Demo Plunkr

虽然我认为实现这个目标的更好选择是使用ng-style指令。

<div class="has-bg" 
  ng-style="{ 'background-image': 'url(../img/' + currentCoverImg + ')' }" 
  style="min-height: 1000px">
    ......
</div>

Answer 2

试试这样。

更改

  scope: {
        bg: '='
    },

到

  scope: {
        bg: '@'
    },

var app = angular.module('app',[])
app.controller('ctrl',function($scope){
  
  $scope.currentCoverImg = "https://www.gravatar.com/avatar/6755dcaf172d19cb9976bedcc56cfed3?s=48&d=identicon&r=PG&f=1";
});
app.directive('backImg', function () {
    return {
        scope: {
            bg: '@'
        },
        link: function (scope, element, attrs) {
            scope.$watch('bg', function () {
                var url = attrs.backImg;
                element.css({
                    'background-image': 'url(' + url + ')'
                });
            })

        }
    }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
 <div class="has-bg" back-img="{{currentCoverImg}}" style="min-height: 1000px">
    ......
    </div>
</div>

通过自定义指令更新背景图像不起作用

2 个答案: