將值從頁面傳遞到另一個頁面

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){ 
}

根據文檔

僅當要公開必須在應用程序啟動之前進行的應用程序范圍配置的API時，才應使用提供者配方。

本文詳細介紹了如何在angular中設置提供程序配置，在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>