2014-06-20 2 views
0

У меня есть страница с несколькими контроллерами и ng-includes. До прихода к актуальной проблеме я должен дать немного подробнее о моем abgular приложенииОшибка привязки двухсторонней привязки к AngularJs с ресурсами

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

ul.nav.navbar-nav.navbar-right(ng-show="identity.isAuthenticated()") 

это неупорядоченный список имеет опции, которые будут показаны пользователям, прошедшим проверку, которая прекрасно работает, как только я войти в его , что означает, что переменные идентичны и метод isAuthenticate работает отлично Но проблема с формой профиля, которая является начальной загрузкой модального окна -

div.modal.fade(id="profileModal") 
    div.modal-dialog 
     div.modal-content 
      div.modal-header 
       button.close(data-dismiss="modal") × 
       h4 Update Profile 
      div.modal-body 
       form.form-horizontal(name="profileForm") 
        fieldset 
         .form-group 
          label.col-md-2.control-label(for="email") Email 
          .col-md-10 
           input.form-control(name="email", type="email", placeholder="Email", ng-model="email", required) 
         .form-group 
          label.col-md-2.control-label(for="fname") First Name 
          .col-md-10 
           input.form-control(name="fname", type="text", placeholder="First Name", ng-model="fname", required) 
         .form-group 
          label.col-md-2.control-label(for="lname") Last Name 
          .col-md-10 
           input.form-control(name="lname", type="text", placeholder="Last Name", ng-model="lname", required) 
         .form-group 
          label.col-md-2.control-label(for="password") Password 
          .col-md-10 
           input.form-control(name="password", type="password", placeholder="Password", ng-model="password") 
         .form-group 
          div.modal-footer 
           button.btn.btn-primary(ng-click="update()", ng-disabled="profileForm.$invalid") Submit 
           |   

           a.btn.btn-default(data-dismiss="modal") Cancel 

Теперь здесь я использую другой контроллер mvProfileCtrl, который выглядит следующим образом -

angular.module('app').controller('mvProfileCtrl', function($scope, mvAuth, mvIdentity, mvNotifier) { 
    $scope.email = mvIdentity.currentUser.username; 
    $scope.fname = mvIdentity.currentUser.firstName; 
    $scope.lname = mvIdentity.currentUser.lastName; 

    $scope.update = function() { 
     var newUserData = { 
      username: $scope.email, 
      firstName: $scope.fname, 
      lastName: $scope.lname 
     } 
     if($scope.password && $scope.password.length > 0) { 
      newUserData.password = $scope.password; 
     } 

     mvAuth.updateCurrentUser(newUserData).then(function() { 
      mvNotifier.notify('Your user account has been updated'); 
     }, function(reason) { 
      mvNotifier.error(reason); 
     }) 
    } 
}) 

проблема здесь, как только я открываю страницу и пользователь не вошел в CurrentUser пустой объект, так что не имеет ничего внутри него. Так я получаю эту ошибку в консоли -

TypeError: Cannot read property 'username' of undefined 
    at new <anonymous> (http://localhost:5000/app/account/mvProfileCtrl.js:2:42) 
    at invoke (http://localhost:5000/vendor/angular/angular.js:3899:17) 
    at Object.instantiate (http://localhost:5000/vendor/angular/angular.js:3910:23) 
    at http://localhost:5000/vendor/angular/angular.js:7164:28 
    at http://localhost:5000/vendor/angular/angular.js:6566:34 
    at forEach (http://localhost:5000/vendor/angular/angular.js:327:20) 
    at nodeLinkFn (http://localhost:5000/vendor/angular/angular.js:6553:11) 
    at compositeLinkFn (http://localhost:5000/vendor/angular/angular.js:6007:15) 
    at compositeLinkFn (http://localhost:5000/vendor/angular/angular.js:6014:13) 
    at publicLinkFn (http://localhost:5000/vendor/angular/angular.js:5916:30) 

Но как только я обновить страницу, CurrentUser имеет все необходимые данные и то, почему нет никакой ошибки. Итак, как я могу убедиться, что когда пользователь аутентифицируется, тогда привязывайте переменные $ scope к этому контроллеру или после этого запускают только контроллер.

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

Edit :: другого возможного ошибка после удаления mvIdentity и части CurrentUser для отладки, когда я попытался это -

angular.module('app').controller('mvProfileCtrl', function($scope, mvAuth, mvNotifier) { 



    $scope.update = function() { 
     console.log($scope.email); 
     var newUserData = { 
      username: $scope.email, 
      firstName: $scope.fname, 
      lastName: $scope.lname 
     } 
     if($scope.password && $scope.password.length > 0) { 
      newUserData.password = $scope.password; 
     } 

     mvAuth.updateCurrentUser(newUserData).then(function() { 
      $('#profileModal').modal('toggle'); 
      mvNotifier.notify('Your user account has been updated'); 
     }, function(reason) { 
      mvNotifier.error(reason); 
     }) 
    } 
}); 

это дало мне неопределенное, что говорит о том, что мой $ сфера не привязана к объекту profileForm, но если я использую наблюдатель, а затем использовать предыдущий код предложил тогда я нашел, что входные элементы действительно имеют имя currentUsers firstname и lastname, которое сообщает, что область $ прилагается там , Я не понимая, что происходит здесь, пожалуйста, может кто-нибудь объяснить немного

я подаю контроллер, как это -

div(ng-include="'/partials/account/authNavBar'",ng-controller="mvProfileCtrl") 

где authNavBar имеет этот код начальной загрузки модальный и profileForm

ответ

1

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

angular.module('app').controller('mvProfileCtrl', function($scope, mvAuth, mvIdentity, mvNotifier) { 
    $scope.mvIdentity = mvIdentity; 
    $scope.$watch('mvIdentity.currentUser', function(currentUser) { 
     if (!currentUser) return; 

     $scope.email = currentUser.username; 
     $scope.fname = currentUser.firstName; 
     $scope.lname = currentUser.lastName; 
    }); 


    $scope.update = function() { 
     var newUserData = { 
      username: $scope.email, 
      firstName: $scope.fname, 
      lastName: $scope.lname 
     } 
     if($scope.password && $scope.password.length > 0) { 
      newUserData.password = $scope.password; 
     } 

     mvAuth.updateCurrentUser(newUserData).then(function() { 
      mvNotifier.notify('Your user account has been updated'); 
     }, function(reason) { 
      mvNotifier.error(reason); 
     }) 
    } 
}); 
+0

ой, наблюдатели были только что мне было нужно, спасибо много – DeadMan

+0

Хорошо, один сомнения, делает наблюдатели задаются значения этих переменных как константы или после того, как найти mvIdentity.currentUser true, они непрерывно устанавливают вызов этой функции, так как когда я пытался записать значение имени пользователя из функции обновления, он дал мне старое значение из mvIdentity.currentUser вместо обновленного значения из поля формы. – DeadMan

+0

вы можете проверить править – DeadMan

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