MVC 视图按钮单击事件，将 AngularJs 对象传递给另一个 MVC 控制器答案

【问题标题】：MVC view button click event , Pass AngularJs object to another MVC ControllerMVC 视图按钮单击事件，将 AngularJs 对象传递给另一个 MVC 控制器
【发布时间】：2017-08-14 03:05:20
【问题描述】：

当视图上的按钮单击事件时，我必须将 AngularJs 对象传递给另一个控制器。

CHTML

<div ng-repeat="hotel in respData.hotels">
   <button type="button" class="btn" data-ng-click="setTab(hotel.code)">Check Availability
</button></div>

脚本

$scope.setTab = function (hotelcode) {
   var url = 'Hotel';
   url += '?HotelCode=' + hotelcode ' 
   window.location.href = url;}

现在我只传递一个值。我想将 hotel object 作为参数传递。他们是这样做的吗？

【问题讨论】：

你为什么使用 window.location 来改变 url ，为什么你不使用角度路由？
我正在使用 mvc 路由。如果他们的方式来组合 anguler 和 mvc 路由？
这个博客可能对你有帮助然后c-sharpcorner.com/UploadFile/cd7c2e/…
谢谢，很有帮助。

标签： javascript jquery angularjs asp.net-mvc asp.net-mvc-4

【解决方案1】：

您可以将整个 Hotel 对象传递给您的第一个控制器，然后使用 $emit 或 $broadcast 将该对象发送到另一个控制器。这是一个简短的例子：

一个.html

<html ng-app="app">

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

 <script>
 var app = angular.module('app', ['ui.router']).config(function($stateProvider, $urlRouterProvider){
 $stateProvider.state('two',{
   url: '/two',
   templateUrl: "two.html",
 })
 })

 app.controller("Parent", function ($scope, $state) {
   $scope.send = function (msg) {
     $scope.$broadcast('eventName', { message: msg });
     $state.go('two')
   };
 });

 app.controller("Child", function ($scope) {
   $scope.$on('eventName', function (event, args) {
     $scope.message = args.message;
     console.log($scope.message);
   });
 });

 </script>

<body ng-app="app">
  <h1> Index Page </h1>

  <!---
  Look at these div tags here, $broadcast is used to transfer content from
  Parent to Child Controllers only and $emit for Child to Parent Controller
  !--->

  <div ng-controller = "Parent" >
  	 <button ng-click = send('Hello')> Send Hello</button>
         <div ng-controller = "Child" class="container" ui-view> </div>
  </div>

</body>
</html>

两个.html

<body ng-app="app">
  	 <span> Recieved : {{message}}</span>
</body>

【讨论】：

我之前尝试过。在其他视图上返回空对象。是否有包含 2 个 html 页面的示例？
试试我上面给出的代码，只需将您的酒店对象而不是 msg 发送到子控制器。
制作2个不同的html文件并复制上面的代码并尝试运行。
XMLHttpRequest 无法加载第二个 html 页面跨源请求。我该如何纠正？
要么使用firefox，要么制作一个节点服务器，然后在上面部署这些网页。

【解决方案2】：

$state.go('toState',object);

如果您使用ui-router，您可以使用$state.go 将对象值发送到另一个控制器，否则您可以使用发射和广播查看详细信息here

广播的工作plnkr可以找到here

app.controller('Parent', function($scope) {
  $scope.message="";
   $scope.emitedmessage="";
  $scope.clickevent=function(){
    $scope.$broadcast('transfer',{message:$scope.message});
  }
    $scope.$on('transferUp',function(event,data){
    console.log('on working');
     $scope.emitedmessage=data.message;
  });
});

app.controller('Child',function($scope){
  $scope.message="";
   $scope.broadcastmessage=""
  $scope.$on('transfer',function(event,data){
     $scope.broadcastmessage=data.message;
  });
  $scope.clickevent=function(){
    $scope.$emit('transferUp',{message:$scope.message});
  }
});

【讨论】：

你确定 OP 正在使用ui.router？