У меня есть страница, в которой перечислены многочисленные типы «плитки» (<div>
) в основной области содержимого и заголовок, который имеет список ссылок, которые действуют как фильтры.
E.g. В области заголовка нажмите ссылку «pdf» - будут показаны только плитки, которые имеют ng-show="showFiles['pdf']
. Если щелкнуть «видео», будут отображаться плитки с ng-show="showFiles['video']
и т. Д.
Шаблон заголовка управляется hdrController
и плитки pageController
.
Первоначально, когда представление загружает $ объем переменной showFiles
в pageController
получает объект от службы Tweaks
, который устанавливает все детали к истинным (таким образом показывая все плитки при запуске):
testApp.controller('pageController', ['$scope', 'Tweaks', function($scope, Tweaks){
$scope.showFiles = Tweaks.tagFilters('all');
}]);
testApp.factory('Tweaks', function(){
var tweaksFactory = {};
var obj = {};
tweaksFactory.tagFilters = function(filter) {
if(filter == 'all') {
obj = {
'video' : true,
'pdf' : true,
'doc' : true
};
} else {
obj = {
'video' : false,
'pdf' : false,
'doc' : false
};
}
return obj;
};
return tweaksFactory;
});
Вопрос: Когда нажав ссылки на фильтр, применяется директива, которая обнаруживает клики - для этого необходимо обновить $scope.showFiles
, чтобы отобразить только фрагменты, относящиеся к конкретному типу фильтра.
См Plunkr - The $scope
из pageController
который содержит showFiles
объект не обновляется, так что изменения не отражаются.
Может кто-нибудь предложить какие-либо предложения? Я новичок в Angular - этот подход лучший способ добиться результата?