Question

我为HTML图像创建了一条指令，该指令允许我为我经常使用的图像存储URL和alt标签，因此我只需要通过其数据字段（代码中的数据类型）为其指定特定值），然后替换为带有相应网址和alt标签的图片。我这样做是为了不必在所有时间写出标签，并且可以在代码中的某个位置进行更改。

到目前为止，只要我将值作为字符串传递，它就可以很好地工作。但是，要使该指令真正有用，我还需要它还可以将值作为变量传递（例如，在ng-repeat内部）。

这是我的设置：

指令-基于传递的名为type的变量构建img：

app.directive('tsTypeImage', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            type: '='
        },
        template:'<img src="{{ type.imgURL }}" alt="{{ type.name }}">'
    };
});

控制器：

app.controller("ctrl", function($scope) {

    $scope.fire = { name: "Fire", imgURL: "/images/fire.png" };
    $scope.water = { name: "Water", imgURL: "/images/water.png" };
    $scope.lightning = { name: "Lightning", imgURL: "/images/lightning.png" };

});

HTML：

<body ng-app="tcgApp" ng-controller="ctrl" ng-init="type='fire'">

    <!-- this works -->
    <ts-type-image data-type="fire"></ts-type-image>

    <!-- this does not work -->
    <ts-type-image data-type="{{ type }}"></ts-type-image>

</body>

我已经尝试了很多使用插值或解析的方法，但是没有成功。这是我的第一个AngularJS项目，因此也许我甚至遇到了错误的方向，并且有一种更简单的方法来实现这一目标。如果是这样，请告诉我：）

Answer 1

请勿将插值与AngularJS表达式混合使用

<body ng-app="tcgApp" ng-controller="ctrl" ng-init="type='fire'">

    <!-- this works -->
    <ts-type-image data-type="fire"></ts-type-image>

    <!-- this does not work -->
    ̵<̵t̵s̵-̵t̵y̵p̵e̵-̵i̵m̵a̵g̵e̵ ̵d̵a̵t̵a̵-̵t̵y̵p̵e̵=̵"̵{̵{̵ ̵t̵y̵p̵e̵ ̵}̵}̵"̵>̵<̵/̵t̵s̵-̵t̵y̵p̵e̵-̵i̵m̵a̵g̵e̵>̵
    <ts-type-image data-type="this[type]"></ts-type-image>

</body>

使用AngularJS表达式中的this标识符来访问$scope对象。

有关更多信息，请参见

AngularJS Developer Guide - Expression context

动态匹配传递给指令的变量

1 个答案: