javascript - 将值从一个页面传递到另一个页面

Question

嘿，每个人都试图将一个值从页面发送到另一个页面，我尝试使用一项服务，然后我制作了另一个 Controller ，这样我就可以将数据从 Controller 发送到另一个 Controller ，最后我想要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>

感谢任何帮助

Answer 1

看来你想要的是一个用于发送和接收消息的事件总线服务，这样更方便。

这是我用于此类目的的服务:

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;
    }
]);

使用装饰器注册服务并在您想要的任何 Controller 中使用它。

$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

You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts.

这个article详细解释了如何在 Angular 中设置提供程序配置，Google 一下，您会发现数百万篇与此主题相关的文章。