Сопоставить переменную, переданную в директиву динамически
Я создал директиву для HTML-изображения, которая позволяет мне хранить URL-адреса и теги alt для изображений, которые я часто использую, поэтому мне нужно только указать конкретное значение через его поле данных (тип данных в коде), и это заменяется изображением с соответствующим URL и тегом alt. Я делаю это, чтобы мне не приходилось все время выписывать теги, и я мог изменить их в одном месте кода.
Пока он отлично работает, пока я передаю значение в виде строки. Но чтобы директива была действительно полезной, мне нужно, чтобы она также работала с передачей значения как переменной (например, внутри ng-repeat).
Вот моя установка:
Директива - строит img на основе переданной переменной с именем type:
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, поэтому, возможно, я даже иду в неправильном направлении, и есть гораздо более простой способ добиться этого. Если да, то скажите :)
Ответы 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>
Используйте идентификатор this в выражениях AngularJS для доступа к объекту $scope.
Для получения дополнительной информации см.
Большое спасибо, это решило мою проблему. Я буду читать больше о контексте выражения!
Было бы разумнее использовать одностороннюю (
<) привязку вместо двусторонней (=) привязки в директиве.