Question

所以我试图将ng-repeat中的变量转换为ng-repeat内的指令。我似乎无法弄清楚，我一直在看几个'@'和'='的东西，但我认为我没有正确使用它们，任何人都可以给我一个明确的例子来说明如何实现这一点拜托，谢谢。

的index.html

<li ng-repeat="item in menu">
     <div backImg="{{item.img}}" class="homeimg"></div>                        
</li>

directive.js

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        scope: {
            backImg:'='  
        }
        /*
        element.css(
            //'background-image': 'url("/angular/my_first_project/v4/images/home_spiderman.jpg")'
            'background-color','yellow',
            "border", "1px solid orange"
        );
        */

        element.css("background", "yellow");
    };
});

Answer 1

正如@Satpal所提到的，您使用双向数据绑定定义了范围，因此您不需要对HTML中的属性使用插值。但是，您还没有正确声明指令（实际上，它看起来像无效的JavaScript）。

app.directive('backImg', function(){
    return {
        scope: {
            backImg:'='  
        },
        link: function(scope, element, attrs){
            var url = scope.backImg;

            /*
            element.css(
                //'background-image': 'url("/angular/my_first_project/v4/images/home_spiderman.jpg")'
                'background-color','yellow',
                "border", "1px solid orange"
            );
            */

            element.css("background", "yellow");
        }
    };
});

此外，您需要在HTML中使用虚拟版本的back-img：

<li ng-repeat="item in menu">
    <div back-img="item.img" class="homeimg"></div>                        
</li>

如何从子指令中的ng-repeat访问项目

1 个答案: