使用服务将对象从控制器发送到另一个

时间:2015-09-15 09:04:34

标签: angularjs

嗨,开始使用AngularJs,我需要从控制器向另一个发送一个对象,因为我创建了一个服务,问题是对象的价值(SessionUser)没有改变,你能帮我吗?这个plunker

我的控制员:

var app = angular.module('app',[]);
app.controller('ctrls',function($scope,SessionUser) {
    $scope.verification=function(user){

        SessionUser.id=user.id;
        SessionUser.type=user.type;

        window.location.href = 'page2.html';  
    }
});

app.controller('ctrls2',function($scope,SessionUser) {

    console.log(SessionUser);
    $scope.obj=SessionUser;

});

服务:

app.service('SessionUser', function () {
    this.type = '';
    this.id = 0;
});

4 个答案:

答案 0 :(得分:3)

通过使用service在控制器之间共享数据,概念上是正确的。每个Angular应用程序只创建一次服务,并且是一个单例。

但是在您的plunker示例中,您创建的只是两个AngularJS应用程序。一个用于index.html,另一个用于page2.html。您创建了同一个应用程序的两个实例。这就是您无法在page2.html中看到数据的原因。

AngularJS应用中的每个页面刷新基本上都会重新创建您的应用并重新初始化您的服务。这也是你经常想要创建一个所谓的Single Page Application

的原因

如果您希望在AngularJS中的应用程序中有多个页面(也就是视图),则必须使用routing概念。 第7步的官方教程Routing & Multiple Views解释了它比我能做到的更好。

您必须使用ngRoute - module:

配置角度内的视图/页面
app.config(function($routeProvider) {
  $routeProvider
    .when('/page1', {
      templateUrl: 'page1.html',
      controller: 'ctrls'
    })
    .when('/page2', {
      templateUrl: 'page2.html',
      controller: 'ctrls2'
    })
    .otherwise('/page1');
});

updated your Plunker并合并了ngRoute模块。

答案 1 :(得分:1)

当您移动到另一个页面时,您将获得一个新的服务实例。如果您想在页面之间发送数据,则应使用angular-ui/ui-router之类的路由。它具有$state功能。您可以通过路由配置中的$state进行数据发送 像这样:

state('page2', {
            url: '/page2',
            templateUrl: 'page2.html' ,
            controller: 'Page2Controller',
            params: {
                type: null,
                id: null
            }
        });

在你的HTML中:

<!--ui-sref do redirect to page2 state-->
<a class="button" ui-sref="page2({ type: type, id: id})">Valider!</a>

在你的page2控制器中:

page2.$inject = ['$stateParams'];

if ($stateParams.type !== null && $stateParams.id !== null) {
   //some logic
}

答案 2 :(得分:0)

嗨,这是我设置和获取数据从一个地方到另一个地方的方法

基本上headInfo数组填充了数据(通过SetData),当你需要它时,你可以调用GetData函数

.factory('CommonService', function () {
    var headInfo = [];
    return {
        SetData: function (key, data) {
            headInfo[key] = data;
        },
        GetData: function (key) {
            return headInfo[key];
        },
     }
});

在你的第一个控制器中你做

CommonSevice.SetData('someName', someValue);

在你的第二个控制器中你做了

CommonSevice.GetData('someName');

希望这是有帮助的

答案 3 :(得分:0)

我使用工厂在不同控制器之间共享数据。请参阅下面的代码。

var app = angular.module('App', []).
    controller('Ctrl1', function($scope,NameFactory){
        console.log('Initial Name ',NameFactory.Get());
        NameFactory.Set('Uthaiah');
        console.log('After change ',NameFactory.Get());
    }).
    controller('Ctrl2',function($scope,NameFactory){
        console.log('Controller 2',NameFactory.Get());
    }).
    factory('NameFactory',function(){
        var Name = "Sanju";
        this.Get=function  () {
            return Name;
        }
        this.Set =function  (val) {
            Name = val;
        }
        return this;
    });