Я создал директиву для изображения HTML, которая позволяет мне хранить URL-адреса и альтернативные теги для изображений, которые я часто использую, поэтому мне нужно только дать ему конкретное значение через поле данных (тип данных в коде) и заменяется изображением с соответствующим URL и тэгом alt.Я делаю это, поэтому мне не нужно все время записывать теги, и я могу изменить его в одном месте кода.
Пока это работает отлично, пока я передаю значение какстрока.Но чтобы директива была действительно полезной, мне нужно, чтобы она также работала с передачей значения в виде переменной (например, внутри ng-repeat).
Вот мои настройки:
Директива - builds 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, так что, возможно, я даже иду в неправильном направлении, и есть гораздо более простой способ добиться этого.Если это так, пожалуйста, скажите мне:)