将$ scope.variable从视图传递到视图

时间:2015-12-27 21:44:46

标签: javascript jquery angularjs ionic-framework

我有一个基本的离子应用程序,允许用户输入他们的名字和姓氏,在这两个字段下面是一个按钮,显示下一个。

点击后,用户被传递到显示它们的术语页面,在屏幕上显示文本,点击接受术语按钮后,我触发ngResource查询将数据发布到服务器。

如果提交按钮位于第一页上,我的表单在没有条款屏幕的情况下效果很好,但在第二页上它几乎就像刷新了postData并且数据擦除了。

查看我的代码:

第一个表单页面(State = enterdetails)

    <input type="text" name="first_name" ng-model="postData.first_name" placeholder="Enter First Name">

    <input type="text" name="last_name" ng-model="postData.last_name" placeholder="Enter Last Name">

    <button class="button button-cv button-large button-block" style="margin-bottom:20px" ng-click="terms()">Next</button>

带有条款的第二页(州=条款)

TERMS TEXT
<button class="button button-cv button-large button-block" ng-click="newPost()">Accept & Sign Up</button>

控制器:

.controller('memberCtrl', function($scope, $http, $state, Post, $window) {

            $scope.postData = {}; //object to collect the data to post
            $scope.postData.first_name = '';
            $scope.postData.last_name = '';

            $scope.terms = function(){
                $state.go('terms');
            }

            $scope.newPost = function() {

                var post = new Post($scope.postData);
                post.$save(); // postData posted to server and saved.

                $state.go('enterdetails'); // after submit go back to main screen again
            }
})

在转到条款页面时,postdata有什么理由不坚持吗?就像我说的,如果我只是将newPost()放在第一页上,那么当用户必须接受这些条款时,这就可以了。

1 个答案:

答案 0 :(得分:2)

设置路由时(使用ui-router表示离子),可以为每个状态创建模板和控制器。这意味着当您使用$state.go()时,模板会更改,并且会实例化新的控制器。

对于创建的每个控制器,还会为该特定控制器创建新的$scope。因此,当您在member页面上时,$scope.postData存在且可用。但是,当您转换到terms状态时,该控制器将被丢弃,并使用新的控制器(销毁您的帖子数据)。

您要做的是创建类似服务的内容来管理您希望在状态更改之间保留的数据。例如:

.service('UserService', function(){
    var user = {
        first_name: '',
        last_name: ''
    };

    this.getUser = function(){
        return user;
    };
});

然后,您只需将此服务注入您的控制器,并编辑UserService.getUser();返回的对象。准备好发布后,使用相同的对象来创建资源。