динамический заголовок/меню в angularjs

Question

При переходе к существующему угловому сайту я столкнулся с раздражающей проблемой. Первоначальный симптом состоял в том, что какой-то контроллер не работал, он инициализирует функцию сразу после входа. Я зашел в систему и я отследил, и в конце концов я понял, что это был недостаток дизайна страницы. По существу, index.html содержит <header>, <ng-view> и <footer>. Есть пара атрибутов ng-if, которые живут в заголовке, который я хочу оценить после входа в систему, но поскольку просмотр является единственной вещью, которая перезагружается, это не было повторной инициализацией контроллера заголовка и, таким образом, не обновляло значения ng-if ,

Затем мне напомнили о ngInclude, который кажется идеальным решением, пока я не подключился и не пойму, что это тоже не сработает. Он загружает шаблон в первый раз и не инициализирует его при изменении представления. Итак, я получил яркую идею передать HeaderController другому контроллеру или службе и контролировать это одно упрямое логическое значение через прокси-серверы. Это тоже не сработало. Затем я попытался поместить функцию и логическое в другую службу и зеркалировать это свойство в контроллере заголовка, но до сих пор я этого не добился.

Я провел много исследований о нескольких представлениях в индексе, и до сих пор я много слышал об этом ui-router, но я все еще не уверен, что так хочу. Это не похоже на простое решение. Я еще не пробовал добавлять ng-include в шаблоны, потому что тогда мне кажется, что это происходит вовремя, когда нам приходилось обновлять 100 страниц каждый раз, когда мы меняли меню.

Я потерял целый день. Если бы кто-нибудь мог сказать мне, как инициировать оценку этого свойства в моем контроллере заголовка, который я хотел бы жить за пределами других шаблонов, пожалуйста, дайте мне знать!

Answer 1

Хорошо, так что вам нужно знать в своем HeaderController, когда представление перезагрузилось. Существует несколько способов сделать это, но проще и, возможно, более корректным в данном конкретном случае является событие.

Итак, когда вы обновляете представление, вы просто делаете это, скажем, вам нужно новое значение ob1 и ob2 переменных.

// ViewController 
$rootScope.$emit('viewRefresh', {ob1: 'newvalue1', ob2: 'newvalue2'}); 

И в вашем HeaderController вы должны слушать для этого события, и установить на вашем $ объеме новые значения для этих ATTRS (если вы не используете controller as синтаксис).

// HeaderController 
$rootScope.$on('viewRefresh', function onRefresh(event, data) { 
    $scope.ob1 = data.ob1; 
    $scope.ob2 = data.ob2; 
}) 

Другое решение Sharing обещание через Службу (используя $q)

function HeaderService($q) { 
    var defer = $q.defer(); 
    return { 
     getPromise: function() {return defer.promise}, 
     notify: function(data) {defer.notify(data)} 
    } 
} 

function HeaderController(HeaderService) { 
    var vm = this; 
    HeaderService.getPromise().then(function(data) { 
     vm.ob1 = data.ob1; 
     vm.ob2 = data.ob2; 
    }) 
} 


function ViewController(HeaderService) { 
    var data = {ob1: 'newvalue1', ob2: 'newvalue2'}; 
    HeaderService.notify(data) 
}