如何使用一个控制器将数据从一个页面绑定到另一个页面?

时间:2015-04-28 14:56:41

标签: angularjs routing

'use strict'

var hsbc = angular.module('hsbc',['ngResource','ngRoute']);

hsbc.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider){   

    //console.log('config part working'); 
    $routeProvider
        .when('/login', {
            controller: 'hsbccontroller',
            templateUrl: 'modules/authentication/views/login.html',
            hideMenus: true
        })
        .when('/gloabltranfer', {
            controller: 'hsbccontroller',
            templateUrl: 'modules/home/views/gloabltranfer.html'
        })
        .when('/tranferReq', {
            controller: 'hsbccontroller',
            templateUrl: 'modules/home/views/TransferRquest.html'
        })
        .when('/reviewdetail', {
            controller: 'hsbccontroller',
            templateUrl: 'modules/home/views/Reviewdetails.html'
        })
        .when('/confirmdetail', {
            controller: 'hsbccontroller',
            templateUrl: 'modules/home/views/confirmdetails.html'
        })

        .when('/', {

            templateUrl: 'modules/authentication/views/login.html'
        })

        .otherwise({ redirectTo: '/login' });

}]).controller('hsbccontroller', ['$scope','$http','$resource','$location', function($scope,$http,$resource,$location, transfer){

    var gformcountry, gtocountry, userID, formData;

    $scope.hsbcaccts = [];
    $scope.countries = [];


    $scope.login = function(){
        var username = $scope.username;
        var pass = $scope.password;
        if(username =='test' && pass =='test'){
            username = 1234;
            $location.path('/gloabltranfer');

        }
        else if(username =='test2' && pass =='test2'){
                username = 2222;
                $location.path('/gloabltranfer');

            }
        else{
                $location.path('/login');
        }
    }
    $http.get('http://localhost/api/Accounts').success(function(data) {
                $scope.hsbcaccts = data.body;
              }).error(function(){
                alert('Sorry server down at moment. please some time later');
              });
     $http.get('http://localhost/api/Country').success(function(data) {
                $scope.countries = data.body;
              }).error(function(){
                alert('Sorry server down at moment. please some time later');
              });

    /*$http.get('json/currency.json').success(function(data) {
            $scope.countries = data;
        });*/


    $scope.countryFromTo = function(){
        $scope.fromData ={ 'fromcountry':$scope.fromcountry,'tocountry':$scope.tocountry};
        $location.path('/tranferReq');

    }


    $scope.tranferForm = function(){
        $scope.tranferForm ={ 'fromaccount':$scope.fromaccount,'toaccount':$scope.toaccount, };
        return $scope.tranferForm;
        $location.path('/reviewdetail');
    }

    $scope.reviewdetails = function(){
        //alert($scope.tranferForm);
         $location.path('/confirmdetail');
    }

    $http.get('http://localhost/api/Accounts').success(function(data){
            //alert(data.id);
            $scope.hsbcaccts = data;
    });


}]);

这里从ng-click tranferForm函数获取数据而不提交数据尝试绑定到下一页$ scope tranferForm函数收集数据并显示在页面reviewdetail页面中。 然后我的控制器一次两次。

1 个答案:

答案 0 :(得分:0)

首先,在不同页面中使用相同的控制器意味着两个不同的实例,彼此完全独立。

现在要在控制器之间共享变量,有两种方法可以做到这一点:

  1. 将数据存储在工厂中,并从其他页面的工厂中获取。

  2. 但是在父级别或视图节点上方的父控制器,并将值存储在父控制器的$ scope变量中。通常这与ng-app在同一个html元素上,并且应该是所有控制器的父元素。

  3. 另外我认为你应该使用不同的控制器。 使用相同的控制器会失去模块化编程的目的。

    我不知道你的情况但是如果可能的话,用不同的名字创建不同的控制器,并且只在这些控制器中放置每页使用的功能。

    如果所有地方都需要某些功能,请创建一个通用功能并将其放入服务中。