Сначала я хочу: у меня есть серия миниатюр. Когда я нажимаю на один, я хочу, чтобы конкретный эскиз отображался в более крупном div с его описанием. (Для последующего: нужно анимировать).
Теперь у меня есть директива и контроллер, но я не знаю, как установить соответствующую переменную!
Итак, некоторый код: Первый HTML: вот корень .jade
файла для этого раздела. У меня есть директива, называемая product
.
section
.detail-view(ng-show="vm.showDetail")
.prod-desc(ng-bind="vm.detailPic")
.prod-img(ng-bind="vm.detailDesc")
product.col-xs-12.product_tile(ng-repeat="item in vm.products", item="::item")
Как вы можете видеть, директива продукта является частью ng-repeat
; по этой причине div, который я хочу показать измененное изображение, находится за пределами итерации (.detail-view
).
Директива по продукту:
'use strict';
ProductDirective.$inject = ['ShopCart', '$animate', 'User'];
function ProductDirective(ShopCart, $animate, User) {
return {
restrict: 'E',
scope: {
item: '='
},
template: require('./product.html'),
link: link
};
function link(scope, element) {
scope.toggleDetails = toggleDetails;
}
function toggleDetails() {
if (!scope.isSelected && isBlurred()) return;
scope.vm.detailPic = scope.item.photo;
scope.vm.detailDesc = scope.item.prod_description;
scope.vm.isSelected = !scope.isSelected;
scope.showDetail = !scope.showDetail;
var action = scope.isSelected ?
}
}
Теперь div, который я хочу обновить с изображением в большом, находится за пределами итерации - и, следовательно, выходит за рамки этой директивы. Как установить значение showDetail
, showDesc
и showPic
?
Поскольку я использую controllerAs
со значением vm
, я думал, что могу просто сделать scope.vm.detailPic = scope.item.photo;
, как и в других решениях, я видел, что при установке свойства на корневом объекте он будет распространяться... но я получаю
Невозможно установить свойство detailPic неопределенного значения
На данный момент, что работает (но выглядит немного странно для меня), это, в toggleDetails()
scope.$parent.$parent.vm.detailPic = scope.item.photo;
scope.$parent.$parent.vm.detailDesc = scope.item.prod_description;
scope.$parent.$parent.vm.showDetail = !scope.$parent.$parent.vm.showDetail