Question

我想在指令中加载图像作为背景。这应该发生在事件之后。例如，如果标志为true，则应更改背景。

怎么可能？

myApp.directive('imgDir', function () {
    return {
        restrict: 'A',
        scope: {
            updateMethod: '=',
        },
        link: function (scope, element, attrs) {

            this.changeBackground = function(flag){
              if(flag){
                var url = '/images/pic1.jpg'
                //load pic1 as background            
              }
              else{
                  var url = '/images/pic2.jpg'
                  //load pic2 as background
              }...
});

html如何看起来像？因为url是在指令中定义的。

THX

Answer 1

如果您只需要更改图像，可以使用ng-class和一些css规则。 https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-class="{'img-1':flag, 'img-2':!flag}"></div>

和你的css

.img-1 {
    background-image: url('/images/pic1.jpg');
}


.img-2 {
    background-image: url('/images/pic2.jpg');
}

乍一看，我甚至不确定你的指令是否有效。如果您想了解更多有关指令以及如何制作指令的信息，请阅读：https://docs.angularjs.org/guide/directive

Answer 2

HTML应该像

<div img-dir updateMethod="...">
   ...
</div>

，关注在线官方documentation。限制为属性的指令写在开始标记中，如果范围指定了另一个属性it can be added inline。

更改指令中的背景图像

2 个答案: