2016-06-09 160 views
0

嘿大家想从网页发送值到另一个我试图使用一个服务,然后我又控制器,所以我可以从控制器将数据发送到另一个控制器,最后我想console.log的结果,但没有什么是显示传递值从页面到另一个页面

这里是我的app.js文件

//*********************************************************************************** 
var app=angular.module("siad",[]); 
//*********************************************************************************** 

app.controller("siadController",['$scope','$http','dataShare','$location',function($scope,$http,dataShare,$location){ 


$http.get("/formulaire/all") 
.success(function(data){ 
    $scope.formulaire=data ; 
}); 


$scope.send=function(){ 
    //$scope.id=f.id_form; 
    //console.log(f) 
    /**$http.get("/question/form?idfrom="+f.id_form) 
    .success(function(data){ 
     $scope.question=data; 
    console.log($scope.question) 
    }) 
    **/ 
     $scope.text = 'sssss'; 
     $scope.send = function(){ 
     dataShare.sendData($scope.text); 
     $location("/user/lesFormulaires.html") 
     } 



} 



}]); 

//*********************************************************************************** 

app.controller("siadController2",['$scope','$http','dataShare',function($scope,$http,dataShare){ 


    $http.get("/formulaire/all") 
    .success(function(data){ 
     $scope.formulaire=data ; 
    }); 

    $scope.text = ''; 
    $scope.$on('data_shared',function(){ 
       var text = dataShare.getData();  
       $scope.text = text; 
       console.log(text) 
    }); 


}]); 
//*********************************************************************************** 

    app.factory('dataShare',function($rootScope){ 
    var service = {}; 
    service.data = false; 
    service.sendData = function(data){ 
     this.data = data; 
     $rootScope.$broadcast('data_shared'); 
    }; 
    service.getData = function(){ 
    return this.data; 
    }; 
    return service; 
}); 

和这里的HTML按钮,当我点击我通过

<a href="/user/lesFormulaires.html" ng-click="send();" class="btn btn-large btn-primary black-btn">clickme</a> 
重定向到另一个页面和发送数据

感谢所有帮助

+0

你有changepageform()函数中你的send()函数作用域。也许试试把它分开放在changepageform()函数之外。 –

+0

感谢提醒我,我忘了编辑它,我更新了问题,ps没有在控制台上显示 –

回答

2

好像你想要的是用于发送和接收消息,这是更方便的事件的巴士服务。

这是我使用上述目的使用该服务:

angular.module('core').factory('event', [ 
    function() { 
     var service = {}; 
     var events = {}; 

     service.on = function (eventId, callback) { 
      // validations... 
      if(!events[eventId]) 
       events[eventId] = []; 
      events[eventId].push(callback); 
      return { 
       unsubscribe: function(){ 
        service.unsubscribe(eventId, callback); 
       } 
      }; 
     }; 

     service.emit = function(eventId, data, callback){ 
      if(events[eventId] && !!events[eventId].length){ 
       for(var i=0; i<events[eventId].length; i++){ 
        events[eventId][i](data, callback); 
       } 
       return true; 
      } 
      else return false; 
     }; 
     service.unsubscribe = function(eventId, callback){ 
      if(events[eventId]){ 
       for(var i=0; i<events[eventId].length; i++){ 
        if(events[eventId][i].toString() === callback.toString()){ 
         events[eventId].splice(i,1); 
        } 
        return true; 
       } 
      }else return false; 
     }; 

     return service; 
    } 
]); 

使用装饰注册服务,并在任何你想要的控制器使用。

$provide.decorator('$rootScope', ['$delegate', 'event', function($delegate, event){ 
     Object.defineProperty($delegate.constructor.prototype, 'eventBus', { 
      get:function(){ 
       var self = this; 
       return{ 
        on:function(eventId, callback){ 
         var ev = event.on(eventId, callback); 
         self.$on('$destroy', function(){ 
          ev.unsubscribe(); 
         }); 
        }, 
        emit: event.emit 
       }; 
      }, 
      enumerable: false 
     }); 
     return $delegate; 
    }]); 

然后使用很简单,只要:

$scope.eventBus.on('someEvent', function(){ 
}); 

$scope.eventBus.emit('someEvent'); 

编辑:

你可以在你的引导你的应用程序的时候添加你的装饰配置,对我来说是

angular.module('core').config(function($provide){ 
} 

按照documentation

时要公开的API 为必须的 应用程序启动前提出申请范围内的配置时,才应使用提供配方。

这个article解释了一点点关于如何设置角度提供商配置,谷歌它你会发现一百万文章关于这个主题。

+0

嘿感谢回答抱歉打扰你,你可以向我解释如何使用它,以及我在哪里放置' $ provide.decorator'。谢谢 –

+1

检查我的更新。希望有所帮助! –

1

检查这个

(function(){ 
'use strict'; 

var app = angular.module('app',[]); 

app.controller('firstCtrl', ['dataService', function(dataService){ 
dataService.store("Test"); 
}]); 

app.controller('secondCtrl', ['dataService', function(dataService){ 
var data = dataService.getData(); 
console.log(data); 
}]); 

app.service('dataService', [function(){ 

var _storage ; 

this.getData = function(){ 
return data; 
} 

this.store = function(data){ 
_storage = data; 
} 
}]); 

}()); 

当你会改变你的状态(或页面)存储控制器将被摧毁,但服务不会,你将能够获得数据。这只适用于如果你不使用window.reload重新加载页面或像这样的smth。

如果这样做,请使用会话存储或任何其他独立存储。

希望他会帮助

1

刚刚更改了app.js的一行,并可以实现你的功能

应用。JS

//********************************************* 
    var app=angular.module("siad",[]); 
    //********************************************* 

app.controller("siadController",['$scope','$http','dataShare','$location',function($scope,$http,dataShare,$location){ 


$http.get("/formulaire/all") 
.success(function(data){ 
    $scope.formulaire=data ; 
}); 


$scope.send=function(){ 
    //$scope.id=f.id_form; 
    //console.log(f) 
    /**$http.get("/question/form?idfrom="+f.id_form) 
    .success(function(data){ 
     $scope.question=data; 
    console.log($scope.question) 
    }) 
    **/ 
     $scope.text = 'sssss'; 
     **/*$scope.send = function(){ 
     dataShare.sendData($scope.text); 
     $location("/user/lesFormulaires.html") 
     }*/** 
     dataShare.sendData($scope.text); 


} 



}]); 

//*********************************************************************************** 

app.controller("siadController2",['$scope','$http','dataShare',function($scope,$http,dataShare){ 


    $http.get("/formulaire/all") 
    .success(function(data){ 
     $scope.formulaire=data ; 
    }); 

    $scope.text = ''; 
    $scope.$on('data_shared',function(){ 
       var text = dataShare.getData();  
       $scope.text = text; 
       console.log(text) 
    }); 


}]); 
//*********************************************************************************** 

    app.factory('dataShare',function($rootScope){ 
    var service = {}; 
    service.data = false; 
    service.sendData = function(data){ 
     this.data = data; 
     $rootScope.$broadcast('data_shared'); 
    }; 
    service.getData = function(){ 
    return this.data; 
    }; 
    return service; 
}); 

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title> The index</title> 
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
    </script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body ng-app ="siad"> 
<div ng-controller="siadController"> 
<a ng-click="send();" class="btn btn-large btn-primary black-btn">clickme</a> 
</div> 
<div ng-controller="siadController2"> 
</div> 
</body> 
</html> 
+0

谢谢你的回答,我不认为你明白我的问题是我没有在同一页面中使用2个控制器在两个不同的页面中使用2个控制器 –

相关问题