Question

嘿大家都试图从页面发送一个值到另一个我试图使用服务然后我做了另一个控制器所以我可以从控制器发送数据到另一个控制器，最后我想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;
    }
]);

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

$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解释了如何在角度设置提供程序配置，google它你会找到关于这个主题的百万条文章。

Answer 2

检查这个

(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重新加载页面时才有效。

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

希望他的帮助

Answer 3

刚刚更改了app.js的一行，可以实现您的功能

<强> 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")
      }*/**
      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>

将值从页面传递到另一页面

3 个答案: