2017-03-22 9 views
0

ボタンクリックイベントが発生したとき、AngulerJsオブジェクトを別のコントローラに渡す必要があります。MVCビューボタンのクリックイベント、別のMVCコントローラにAngulerJsオブジェクトを渡す

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;} 

今私は一つの値だけを渡しています。 ホテルオブジェクトをパラメータとして渡したいと思います。 これを行う方法はありますか?

+0

なぜあなたはURLを変更するwindow.locationのを使用しているOne.html

、なぜあなたはn角度ルーティングを使用していますか? –

+0

私はmvcルーティングを使用しています。組み込みのアンギュラーとmvcルーティングの方法は? – sanjeewa

+0

このブログはあなたのために役立つかもしれません。http://www.c-sharpcorner.com/UploadFile/cd7c2e/mvc-routing-with-angularjs-routing/ –

答えて

2

ホテルオブジェクト全体を最初のコントローラに渡してから、そのオブジェクトを別のコントローラに送信するために$ emitまたは$ broadcastを使用することができます。ここでは簡単な例です:

<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" > 
 
    \t <button ng-click = send('Hello')> Send Hello</button> 
 
     <div ng-controller = "Child" class="container" ui-view> </div> 
 
    </div> 
 

 
</body> 
 
</html>

Two.html

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

+0

私はそれを前に試しています。他のビューでnullオブジェクトを返します。 2 htmlページのサンプルがありますか? – sanjeewa

+0

上記のコードを試してください。msgの代わりにホテルのオブジェクトを子コントローラに送信してください。 – Kamesh

+0

2つの異なるHTMLファイルを作成し、上記のコードをコピーして実行してみてください。 – Kamesh

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

あなたはEMITを使用することができない場合は、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}); 
    } 
}); 
を見つけることができる詳細を見るブロードキャストすることができます
+0

OPが「ui.router」を使用していることを確認しますか? – Satpal