2015-04-21 3 views
0

У меня есть страница, в которой перечислены многочисленные типы «плитки» (<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 - этот подход лучший способ добиться результата?

ответ

1

Вы всегда создаете новый «obj» - поэтому ссылка в контроллере не будет обновляться. В любом случае вы всегда должны обращаться к данным/статусу через служебные функции. plnkr

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 
     }; 
     obj[filter] = true; 
    } 
    console.log('alter the object - so it reflects in the scope'); 
    console.log(obj); 
    return obj; 
    }; 
    tweaksFactory.show = function(type) { 
    console.log(obj, type); 
    return obj[type]; 
    }; 
    return tweaksFactory; 
}); 
1

связи с двумя или несколькими контроллерами осуществляется с помощью служб и событий, вы можете сделать это с добавлением нового сервиса для широковещательных сообщений

testApp.factory('mySharedService', function($rootScope) { 
    var sharedService = {}; 

    sharedService.prepForBroadcast = function(msg) { 
     $rootScope.$broadcast('handleBroadcast', msg); 
    }; 

    return sharedService; 
}); 

Вы можете увидеть код обновляется с помощью этой службы, чтобы разрешить директивы для связи с контроллер: http://plnkr.co/edit/M3RECJmZa64cxKtpWeHO?p=info

Смежные вопросы