将 id 从一个控制器传递到另一个不同的 ng-app 文件答案

【问题标题】：Passing id from one controller to another of different ng-app files将 id 从一个控制器传递到另一个不同的 ng-app 文件
【发布时间】：2018-02-21 22:11:14
【问题描述】：

我有 2 个 js 文件，即 CollegeApp.js 和 branchApp.js。我有两个控制器 CollegeController.js 位于collegeApp.js ng-app 内，BranchController.js 位于branchApp.js ng-app 内。

我正在从我的 html 重定向到另一个页面。

这是我的html

<li data-ng-click="getBranchByBranchId(branch.branchId); setBranchId(branch.branchId)">
    {{branch.branchName}}
</li>

这个html页面在collegeApp.js中。点击分支名称后，我正在调用方法，它的控制器看起来像这样。

CollegeController.js

var CollegeController = function($scope, $rootScope, $http, $location, $route,CollegeService,$routeParams) {

    $rootScope.pageTitle = $route.current.title;

        $scope.getBranchId = function() {
        CollegeService.getBranchId().then(function(response) {
            $scope.branchId = response.data;
        });
    }

    $scope.setBranchId=function(branchId) {
      CollegeService.setBranchId(branchId);
    $rootScope.passBranchId = branchId;
      window.location.href="./branch?
      branchId='+$rootScope.passBranchId";//Here I am redirecting to branch page with id.//
    }
}

分支页面在branchApp.js 中，以上代码在collegeApp.js 中。现在在 BranchController.js 中，我试图捕获从上一页发送的 branchId。

BranchController.js

var BranchController = function($scope, $rootScope, $http, $location, $route,BranchService,$routeParams) 
    {
      $scope.branchId = $rootScope.passBranchId;//Here i am trying to get branchId//
      console.log($scope.branchId);//I am getting undefined.
    }

我尝试了 $rootScope,$routeParams。但它们都不起作用。有什么可能的方法可以将 branchId 从collegeApp 传递到branchApp？还是我错过了什么？

【问题讨论】：

我打算建议使用服务来共享数据，因为这是他们的目的，但您已经在使用一个。为什么不直接将CollegeService 添加到BranchController 并在其中调用CollegeService.getBranchId()？
好的。我在 BranchController 中添加了 CollegeService 作为依赖项。现在在 BranchController 中我可以直接调用 getBranchId() 吗？
是的，我不明白为什么不这样做。整个服务点能够在控制器/指令/组件之间共享逻辑/数据。
但是当我在 BranchController 中添加 CollegeService 作为依赖项时，我使用了两个不同的 app.js 文件，尽管我在分支索引页面中包含了 CollegeService.js，但它显示了 Unknown service provider CollegeService 错误
哦，这是两个完全独立的应用程序吗？那是另一个故事。如果您使用 2 个完全不同的应用程序，我不确定是否可以做您想做的事情

标签： angularjs

【解决方案1】：

重定向页面时使用$location.path('/branch/' + branchId) 另外，您的控制器中已经有$location。

然后你会想要使用$routeParams 在你的 url 中找到 id。

更新路由配置以查找参数，应该是这样的

  $routeProvider
  ...  
  .when('branch/:branchId', {
        templateUrl: 'views/branches.html',
        controller: 'BranchController'
  })

然后像这样获取值

$scope.branchId = $routeParams.branchId;

【讨论】：

我需要在 window.location.href 中添加 $location.path(branchId) 吗？如果需要，请告诉我如何使用它？
@SachinHR $location.path 替换了 window.location.href，它的工作原理相同，$location 是 ngRoute 模块的一部分
但我在点击时调用获取和设置部门，在 setDepartment 方法中我使用的是 window.location.href。我没有使用 app.js 进行重定向
我给了 location.path()。我可以在 location.path() 中搜索外部文件夹吗？就像在 window.location.href 中一样，如果我们给出 ./ 那么它会在文件夹外搜索

【解决方案2】：

我意识到您希望在同一个应用程序中的多个模块之间共享信息。这是一个完整的代码示例，用于测试场景。

/**
 * Service definition which holds the passed values
 */
angular.module('myapp')
.config('collegeService', collegeService);
collegeService.$inject = [];

function collegeService() {
    var branchId = null;

    return {
        getBranchId:    getBranchId,
        setBranchId:    setBranchId
    };

    function getBranchId() {
        /**
         * Implement a promise based approach if the branch ID reads from an external source
         * else just return it as given below
         */
        return branchId;
    }

    function setBranchId(brId) {
        branchId = brId
    }
}

/**
 * First controller definition
 */
angular.module('myapp')
.controller('CollegeController', CollegeController);
CollegeController.$inject = ['$scope', 'collegeService'];

function CollegeController($scope, collegeService) {

    $scope.getBranchId = function() {
        /**
         * Use promise based approach as below if the read method returns a promise
         */
        collegeService.getBranchId().then(function(response) {
            $scope.branchId = response.data;
        });

        /**
         * Uses a simple approach as below if the read method returns the value
         */
        // $scope.branchId = collegeService.getBranchId();
    };

    $scope.setBranchId = function(branchId) {
        CollegeService.setBranchId(branchId);
    }
}

/**
 * Second controller definition
 */
angular.module('myapp')
.controller('BranchController', BranchController);
BranchController.$inject = ['$scope', 'collegeService'];

function BranchController($scope, collegeService) {
    $scope.init = function() {
        $scope.branchId = collegeService.getBranchId();
    };

    /**
     * Invokes the init method during the Controller getting instantiated
     */
    $scope.init();
}

【讨论】：

它是否适用于多个 ng-apps？因为我正在尝试将 branchId 从 CollegeApp.js 发送到 branchApp.js
你的意思是一个需要相互通信的完全隔离的应用程序？仅供参考，单个应用程序可以有尽可能多的模块来做独立的事情。如果您需要完全隔离应用程序，则应该进行分离。
好的。但是我在同一个项目中使用了两个 ng-app。那么在同一个项目中这两个 ng-apps 之间是否不可能进行通信？
隔离的应用程序可以通过多种方式相互通信，一种可能的方式是通过 RESTful 端点使用基于服务器的变量。不推荐的替代方法是使用 javascript 在应用程序之间传递变量。
同一个项目中运行多个应用程序有什么原因吗？

【解决方案3】：

我终于找到了解决方案。我刚刚添加了这一行并且它有效。

在 SchoolController.js 中

    $scope.setBranchId=function(branchId)
    {
      window.localStorage.setItem("branchId", branchId); 
    }

在 BranchController.js 中

    $scope.branchId =   window.localStorage.getItem("branchId");

现在我可以在控制器中的任何地方使用 Id，并且我可以将 Id 从collegeApp.js 传递到 branchApp.js ng-apps。

【讨论】：