AngularJs与资源的两种方式数据绑定实现错误

Question

我有一个包含几个控制器和 ng-includes 的页面。 在遇到实际问题之前，我应该详细介绍一下我的 AngularJS 应用程序

它在节点之上并表达 它正在与在 express 上运行的护照进行通信以进行身份​​验证 现在我想为经过身份验证和未经身份验证的用户提供相同的页面，但有一些差异，可以说第一个更改是导航栏中的配置文件选项 -

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

这个无序列表有选项显示给经过身份验证的用户，一旦我登录它就可以正常工作，这意味着变量 identity 和方法是 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 变量绑定到此控制器或之后仅启动控制器。

项目来源有点大，所以我没有在这里包含完整的细节，所以如果我错过了任何细节，请提出建议

编辑:: 删除 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);
        })
    }
});

它给了我 undefined ，这表明我的 $scope 没有绑定到 profileForm 对象，但是如果我使用观察器，然后使用之前建议的代码，我发现输入元素确实具有 currentUsers 名字和姓氏告诉 $scope 附加在那里。我不明白这里发生了什么，请任何人解释一下

我正在应用这样的控制器 -

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

authNavBar 有这个引导模式代码和 profileForm 的地方

Answer 1

使用范围和观察者对您有利。如果您在作用域上设置 mvIdentity 并引用服务，则可以添加观察者并仅在 currentUser 存在时更新这些属性。

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);
        })
    }
});