Проблемы с AngularJS Controller

У меня есть следующие настройки в моем HTML-файле:

<body>
    <nav ng-controller="loginCtrl">
        <div>
            <li>Apple</li>
            <li>Mango</li>
            <li>{{user}}</li>
        </div>
    </nav>

    <div ui-view></div>

</body>

У меня есть меню навигации и ui-view который отображает разные страницы.

У меня также есть контроллер, loginCtrlс переменной области видимости $scope.user, Этот контроллер также вызывается в маршрутизаторе состояния интерфейса пользователя для login.html файл, так что форма входа может использовать свои методы.

Когда пользователь входит в систему, я хочу показать его имя в меню навигации, используя {{user}} выше. Меню навигации, как вы видите, является видимым (статическим) независимо от других частичных страниц, которые будут загружены в ui-view,

На данный момент это не работает, и я не знаю почему.

Насколько я понимаю, форма входа в login.html и меню навигации находятся в разных файлах, так что, возможно, они используют один и тот же контроллер (в рамках одного и того же модуля), но могут работать в разных областях / средах (я не совсем уверен, об этом).

Вот почему я обновляю значение $scope.user но он не появляется в меню навигации.

Может кто-нибудь объяснить мне, почему это не работает и как добиться моей функциональности?

Спасибо

Источник

2 ответа

Использование единого сервиса для обмена UserData объект:

app.service('UserData', function(){return {name: 'default'};});
app.controller('LoginController', function($scope, UserData){
    $scope.user = UserData;
});

Теперь все экземпляры контроллера имеют доступ к одному UserData объект.
когда user.name изменилось, все контроллеры могут видеть это.

Источник

Мне интересно, нужно ли вызывать ваш LoginController для вашего пользовательского интерфейса и родственного элемента, когда вы можете загрузить его на родительский элемент

В любом случае, у вас есть несколько решений, чтобы заставить двустороннюю привязку работать:

  • Решение @vp_arth действительно отличное, обычно оно используется для обмена данными между контроллерами.
  • Переместите атрибут ng-controller в общий родительский элемент и, если необходимо, объявите другой контроллер для вашего login.html, который будет дочерним для вашего LoginController. Затем используйте объект вместо переменной в родительской области видимости:

$scope.user = {};

и затем заполните его в своей дочерней области следующим образом: $scope.user.name = ...

Даже если вы используете тот же контроллер, что и для родительского и дочернего контекста, вы должны заставить эту работу работать примерно так: $scope.user = $scope.user ? $scope.user : {}; вместо $scope.user = {};

(если не ясно, я могу сделать сравнительную скрипку, чтобы показать вам)

Эта вики действительно помогла мне, когда у меня возникли проблемы, подобные вашей: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Источник
Другие вопросы по тегам