如何在ONSEN UI角度中将数据从一个控制器传递到另一个控制器?

时间:2017-11-14 08:13:47

标签: angularjs onsen-ui

我有一个像下面的HTML

<a class="event_detail_btn_a" ng-click="foo()"></a>

以下是我的控制器

    onsenApp.controller("EventDetailController", function ($scope) {
        $scope.foo = function(){
            alert("foo!");
            var options = {
                data: {
                    title: 'Another Page'
                }
            };

        };
});

我想通过&#34;选项&#34;从该控制器变量到另一个控制器。 我该怎么做 ?

3 个答案:

答案 0 :(得分:0)

使用$broadcast在控制器之间传递数据。

在示例add()中定义Controller1,在2秒后传递给Controller2

angular
  .module("app", [])
  .controller("Controller1", function($scope, $rootScope, $timeout){
    var add = function(a, b) {
      return a + b;
    }
    
    $timeout(function(){
      $rootScope.$broadcast("Add function", add);
    }, 2000);
  })
  .controller("Controller2", function($scope, $rootScope, $timeout){
    $scope.$on("Add function", function(event, add) {
      $scope.sum = add(3, 4);
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Controller1">
    <span>Add function defined in Controller1</span><br /><br />
  </div>
  <div ng-controller="Controller2">
    <span ng-show="sum">3 + 4 = {{ sum }}</span>
    <span ng-show="!sum">Controller2 waiting for add function...</span><br />
  </div>
</div>

答案 1 :(得分:0)

创建servicefactory并注入两个控制器的最佳方法如下:

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

myApp.factory('MyService', function() {
  var options = {
    data: {
      title: 'Another Page'
    }
  };
  return {
    options
  };
});

myApp.controller('FirstCtrl', function($scope, MyService) {
  $scope.options = MyService.options;
});

myApp.controller('SecondCtrl', function($scope, MyService) {
  $scope.options = MyService.options;
});

答案 2 :(得分:0)

您希望将数据传递给另一个控制器,我得到的方式是:

onsenApp.controller("EventDetailController", function ($scope) {
    $scope.foo = function(){
        alert("foo!");
        var options = {
            data: {
                title: 'Another Page'
            }
        };

这是使用事件推送页面实现此目的的一种方法,您可以使用它发送数据。

     myNavigator.pushPage('xyz.html', 
        {myData: options} );
  }
    };

 });

onsenApp.controller("SecondController", function ($scope) {

在这里,您可以获得所需的数据

$scope.options =  myNavigator.getCurrentPage().options.myData;

});