Question

我正在为后端构建一个使用AngularJS和Slim PHP框架的应用程序，现在我完成了我的第一个表单并为它创建了一个模板路径。现在我的问题出现了，当我想将数据传递给另一个控制器时，我需要将数据传递给另一个控制器+视图（模板），我不想污染我的第一个视图既不是它的控制器，所以我真的想要/需要将数据传递给另一个控制器，我可以用我的数据和另一种形式（第二种形式用于计算和其他东西）...所以你可以调用第一个控制器预先保存，同时真正的数据保存（后端到DB）只会发生在第二个控制器+模板中。这是我的第一个模板视图，其格式为：

<form novalidate id="formAdd" name="formAdd" class="form-horizontal well col-md-7 col-md-pull-5" method="post">
    <fieldset>
        <legend>Transaction form</legend>

        <div class="form-group">
            <label for="symbol" class="col-sm-4 control-label">Symbol</label>
            <div class="col-sm-5 symbols">
                <input type="text" name="symbol" class="form-control" ng-model="trsn.symbol" placeholder="symbol" required />
          </div>  
        </div>                    
        <div class="form-group">
            <label for="accnt_id" class="col-sm-4 control-label">Account</label>
            <div class="col-sm-5">
                <select id="accnt_id" name="accnt_id" ng-model="trsn.accnt_id" class="form-control" required>
                    <option value="">...</option>   
                    <option ng-repeat="account in trsn.accounts" value="{{account.accnt_id}}">{{account.accnt_name}}</option>
                </select>
            </div>
        </div> 
        <!-- ....etc, etc.... -->

        <div class="form-actions col-sm-8 col-sm-offset-4">
            <button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="formAdd.$invalid" ng-click="preSaveTrsn(trsn, formAdd)">Save transaction</button>
            <button type="reset" class="btn btn-default">Cancel</button>
        </div>          
    </fieldset>
</form>

然后是带有模块和路线的应用程序：

var investingApp = angular.module('investingApp', ['ngSanitize','ngResource', 'ngRoute'])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider.when('/new-trsn',
            {
                templateUrl: 'templates/StockTransaction.html',
                controller: 'StockTransactionController'
            });
        $routeProvider.when('/presave-trsn',
            {
                templateUrl: 'templates/PreSaveTransaction.html',
                controller: 'PreSaveTrsnController'
            });        
    });

现在我的第一个控制器里面是presave函数，它是空的，因为我不知道该如何处理它以便我可以将事务数据发送到下一个控制器+视图：

investingApp.controller('StockTransactionController', 
    function TransactionController($scope, $http, $location, $compile, $timeout, transactionDataService, dateFilter) {
        // define some default variables
        $scope.trsn = {};
        $scope.trsn.symbol = "";
        ...
        $scope.preSaveTrsn = function(trsn, formAdd) {          
            // what to put in here to transfer data to next controller????
        };

然后是我的最后一个控制器，由于我无法接收任何数据，因此我也没有任何内容......但基本上我要注入的是来自第一个表单/控制器的事务数据（trsn）。

investingApp.controller('PreSaveTrsnController', 
    function MenuController($scope, $http, trsn) {
        console.debug(trsn);
});

我是否必须以某种方式将某些内容放入routeProvider内？ ...或者我必须在第一个控制器内的preSaveTrsn函数内填写一些特殊的东西???我对此非常困惑，因为我找到的所有示例都是为了立即保存到数据库，但我不能像我构建我的应用程序那样做，它实际上必须在第二个控制器上，因为我没有做的几个原因我想我必须在这里解释....感谢任何帮助：）

Answer 1

您可以创建轻量级服务 - value

angular.module('investingApp').value('MySharedValue', {});

然后将其注入两个控制器：

TransactionController($scope, $http, $location, $compile, $timeout, transactionDataService, dateFilter, MySharedValue)

只是为了分配你的共享价值

        $scope.preSaveTrsn = function(trsn, formAdd) {          
            MySharedValue.trsn = trsn;
        };

Answer 2

有两种方法可以实现它。首先是在$ rootScope上或在这两个控制器作用域的父作用域上声明模型对象。通过这种方式，数据可以共享，并且无论是谁，都可以对控制器进行更改。

第二种更好的方法是创建跟踪模型更新的服务。将此服务注入控制器。任何控制器都可以询问服务中的模型并进行更新。由于服务是单例，因此模型更改将在控制器之间共享。

像

angular.module("myApp",[]).factory('transactionService',[function(){
   var service={};
   var model={};
   service.preSaveTrsn = function(trsn, formAdd) {          
        //set model here
    };
   service.getPreSaveTrsn=function() {
       return model;
   }
   return service;
}]);

从AngularJS如何将数据从控制器+模板传递到另一个控制器+模板？

2 个答案: