Question

我有一个控制器＆amp;计算和显示特定元素的视图。当我单击视图上的按钮时，我想打开另一个显示有关该项目的更多信息。

将元素传递给另一个控制器进行显示的最佳方法是什么？

非常感谢

Answer 1

您可以构建一个服务，从一个控制器获取数据并将其传递给另一个控制器，如下所示：

.factory('shareData', function(){

    var finalData;
    return {
        sendData: function(data) {
            finalData = data;
        },
        getData: function() {
            return finalData;
        }
    }
});

您拥有的另一个选择是在主控制器中创建共享变量（离子中的'app'控制器）

.controller('app', function($scope){
    $scope.data;
})
.controller('app.controller1', function($scope){
    $scope.data = "Hello World";
})
.controller('app.controller2', function($scope){
    console.log($scope.data); //Hello World
});

Answer 2

Matan Gubkin所包含的另一个选项是将数组包含在$ rootScope中：这样你就可以从任何地方访问它。

Answer 3

@Matan Gubkin的想法很接近，但您应该使用该服务来获取您想要的特定项目。

.factory('shareData', function(){

  var finalData = ["Hello World",'more data'];

  return {
    sendData: function(data) {
        finalData = data; 
    },
    getData: function() {
        return finalData;
    },
    getItem:function(_id) {
       return finalData[_id];
    }
  }
});

然后设置你的控制器

.controller('app.controller', function($scope){

})
.controller('app.controller-list', function($scope,shareData){
    $scope.data = shareData.getData();
})
.controller('app.controller-detail', function($scope,$stateParams,shareData){
    // use stateParams to get index
    console.log(shareData.getItem($stateParams.index)); //
});

设置路线

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
   controller: 'app.controller'
  })

  .state('app.controller-list', {
    url: "/list",
  })

  .state('app.controller-detail', {
    url: "/detail/:index", // <-- pass in index as stateParam
  });
   // if none of the above states are matched, use this as the fallback
   $urlRouterProvider.otherwise('/app/list');
});

离子：在控制器之间传递数组元素

3 个答案: