Question

我需要将一系列照片描述传递给我的指令。当我努力使其工作时，我才意识到angular将我的列表属性作为字符串而不是数组。

这是指令调用：

    <photos photoid="ImpactDemiPrecoce" list="[{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactDemiPrecoce'}]" extension="png"></photos>

该指令如下：

app.directive("photos", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            "photoid": "@",
            "scrollable": "@",
            "size": "@",
            "list": "@",
            "extension": "@"
        },
        template: 
        '<div id="photos{{photoid}}" class="scroller" ng-class="[{{scrollable}}]" ng-style="{width: list.length==1?size:\'auto\', height: size}">\n\
         # of photos is {{list.length}}.<br>\n\
            <div ng-repeat="p in list track by $index"\n\
                ng-style="{\'background-image\': \'url({{p.file}}.thumb.{{extension}})\'}"\n\
                ng-click="openPopoverImageViewer(\'#photos{{id}}\', {{$index}})">\n\
                <div>{{p.text}}</div>\n\
            </div>\n\
        <div>',
        link: function (scope, element, attr) {
            if (!scope.extension)   scope.extension="jpg";
            if (!scope.scrollable)  scope.scrollable="hScrollable";
            if (!scope.size)        scope.size="171px";
        }
    };
});

该指令显示“照片数量为126”。这是list属性中字符串的长度。

怎么做？

Answer 1

您正在为list元素设置错误范围。 @将取值而不是对象。你需要使用=而不是。

app.directive("photos", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            "photoid": "@",
            "scrollable": "@",
            "size": "@",
            "list": "=",
            "extension": "@"
        },
        template: 
        '<div id="photos{{photoid}}" class="scroller" ng-class="[{{scrollable}}]" ng-style="{width: list.length==1?size:\'auto\', height: size}">\n\
         # of photos is {{list.length}}.<br>\n\
            <div ng-repeat="p in list track by $index"\n\
                ng-style="{\'background-image\': \'url({{p.file}}.thumb.{{extension}})\'}"\n\
                ng-click="openPopoverImageViewer(\'#photos{{id}}\', {{$index}})">\n\
                <div>{{p.text}}</div>\n\
            </div>\n\
        <div>',
        link: function (scope, element, attr) {
            if (!scope.extension)   scope.extension="jpg";
            if (!scope.scrollable)  scope.scrollable="hScrollable";
            if (!scope.size)        scope.size="171px";
        }
    };
});

您可以找到@和=超过here的区别

Angularjs指令：如何通过属性传递数组？

1 个答案: