Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript AngularJs双向数据绑定实现资源错误_Javascript_Angularjs_Twitter Bootstrap_Data Binding - Fatal编程技术网

Javascript AngularJs双向数据绑定实现资源错误

Javascript AngularJs双向数据绑定实现资源错误,javascript,angularjs,twitter-bootstrap,data-binding,Javascript,Angularjs,Twitter Bootstrap,Data Binding,我有一个包含两个控制器和ng的页面。 在讨论实际问题之前,我应该给出一些关于AngularJS应用程序的细节 它位于node和express的顶部 它正在与express上运行的passport通信以进行身份验证 现在,我想为经过身份验证的用户和未经身份验证的用户提供相同的页面,但有一些不同,比如说,第一个更改是导航栏中的profile选项- ul.nav.navbar-nav.navbar-right(ng-show="identity.isAuthenticated()") 此无序列表具有

我有一个包含两个控制器和ng的页面。 在讨论实际问题之前,我应该给出一些关于AngularJS应用程序的细节

它位于node和express的顶部 它正在与express上运行的passport通信以进行身份验证 现在,我想为经过身份验证的用户和未经身份验证的用户提供相同的页面,但有一些不同,比如说,第一个更改是导航栏中的profile选项-

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) 
它给了我undefined,这表明我的$scope没有绑定到profileForm对象,但是如果我使用watcher,然后使用之前建议的代码,那么我发现输入元素确实具有currentUsers firstname和lastname,这表明$scope附加在那里。我不明白这是怎么回事,谁能解释一下吗

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

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

如果authNavBar具有此引导模式代码和profileForm,请充分利用scope和watchers。如果使用对服务的引用在作用域上设置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);
        })
    }
});

哦,观察者正是我所需要的,谢谢,好吧,有一个疑问,观察者是将这些变量的值设置为常量,还是在找到mvIdentity.currentUser true之后,他们不断地设置调用这个函数,当我试图从更新函数中记录username的值时,它从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);
        })
    }
});