1つのHTMLから別のHTMLに同じ角度コントローラーonClickを使用してデータを渡す

Question

すべてのデータを取得して変数「storedata」に格納し、角度コントローラに関連付けられたHTMLビュー「A」に表示します私はthymeleafテンプレートを使用していますが、IDをクリックすると別のHTMLビュー "B"にコンテンツを表示したいので、すでにデータが格納されている変数 "storesata"を使用したいと考えています。だから私はHTMLビュー "B"を同じ角度コントローラーとリンクしてみましたが、私はそれを直接アクセスすることができると考えましたが、できませんでした。あなたの提案は貴重です。すべてのファイルが下に貼り付けられます。

HTML ""

<div data-ng-repeat="storedata in storeDataModel"> 
     <a class="clickableRow" title="Click to get User details" onclick="window.open('B.html')" >{{storedata.ID}} 
    </a> 
</div> 

HTML "B"

<div ng-controller="angularController"> 
<a> HELLO WORLD..!! {{storedata.ID}}</a> 
</div> 

Answer 1

あなたはそれをブートストラップすることなく、別のビューをロードすることはできません。ウィンドウを呼び出す。オープンしている場合は、作業している角度アプリケーションとは関係のないhtmlファイルのみをロードしています。 詳細については、angular bootstrapping.

もう1つの方法は、ng-routeまたはui-routerを使用することです。私は後者をお勧めします。例えば

はコードの下を見て：ビューを変更すると、コントローラの新しいインスタンスを初期化しますので、

angular.module('app', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 

 
    // State definition 
 
    $stateProvider 
 
     .state('homeState', { 
 
     abstract: true, 
 
     url: '/home', 
 
     template: '<div> {{ title }} ' + 
 
      '<div ui-view><div>' + 
 
      '</div>', 
 
     controller: 'HomeController' 
 
     }) 
 
     .state('homeState.childStateA', { 
 
     url: '/stateA', 
 
     template: '<div> {{ data }} </div>' + 
 
      '<button data-ng-click="$state.go(\'homeState.childStateB\')"> Click Me To GoTo StateB </button>', 
 
     controller: 'StateAController' 
 
     }) 
 
     .state('homeState.childStateB', { 
 
     url: '/stateB', 
 
     template: '<div> {{ data }} </div>' + 
 
      '<button data-ng-click="$state.go(\'homeState.childStateA\')"> Click Me To GoTo StateA </button>', 
 
     controller: 'StateBController' 
 
     }); 
 

 
    // Default to stateA 
 
    $urlRouterProvider.otherwise('/home/stateA'); 
 
    }) 
 
    .run(function($rootScope, $state, $stateParams) { 
 
    $rootScope.$state = $state; 
 
    $rootScope.$stateParams = $stateParams; 
 
    }) 
 
    .controller('HomeController', function($scope) { 
 
    // homeState data 
 
    $scope.title = 'State example'; 
 
    }) 
 
    .controller('StateAController', function($scope) { 
 
    // StateA data 
 
    $scope.data = 'Hi State A'; 
 
    }) 
 
    .controller('StateBController', function($scope) { 
 
    // StateB data 
 
    $scope.data = 'Hi State B'; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 
 

 
<div data-ng-app="app"> 
 
    <div ui-view></div> 
 
</div>