AngularJS + Ionic - 別のページ/ビューにコンテンツを追加する

Question

私はangularjsとionicを使い慣れていないので、ボタンをクリックすると別のページ/ビューにコンテンツを追加する方法がわかりません。今すぐ「追加」ボタンをクリックすると、ホームページのボタンの下にコンテンツが表示されますが、2ページ目に表示します。助言がありますか？

タブ-home.html

<ion-view view-title="Home"> 
     <ion-content> 

    <h2>Welcome to Homepage</h2> 
    <button class="button" ng-click="AppendText()">Append</button> 
    <!--<div id="divID"></div>--> // Text 'Hi" only displays on homepage 
</ion-content> 
</ion-view> 

controller.js

.controller('SecondCtrl', function($scope) { 
    $scope.AppendText = function() { 
    var myEl = angular.element(document.querySelector('#divID')); 
    myEl.append('Hi<br/>');  
    } 
}) 

タブsecond.html

<ion-view view-title="Second Page"> 
    <ion-content> 

    <div id="divID"></div> 

</ion-content> 
</ion-view> 

Answer 1

ここでの問題は、あなたがjQueryスタイルの方法でやっていることだと思います。これにはより角度のあるアプローチが必要です。

ありますが、これを扱うことができるカップルの方法がありますが、正しい方法は

オプション1などのアプリの機能/レイアウト/スタイルに依存している：あなたは、あなたのアプリにルーティング/状態を使用している場合、 コントローラで抽象的なルートを使用するだけで済みます。抽象ルートのコントローラーにあなたの変数データをアタッチすると、ネストされたルートは

その$ scope.your.variable

（app.js）を継承

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
$stateProvider 
.state('exampleState', { 
    url: '/example', 
    abstract: true, 
    templateUrl: 'templates/example/root-view.html', 
    controller: 'ParentCtrl' 
    }) 

    .state('stats.games', { 
    url: '/games', 
    views: { 
     'stats-games':{ 
     templateUrl: 'templates/example/firstpage.html', 
     controller: 'PageOneCtrl' 
     } 
    } 
    }) 
    .state('stats.games', { 
    url: '/games', 
    views: { 
     'stats-games':{ 
     templateUrl: 'templates/example/secondpage.html', 
     controller: 'PageTwoCtrl' 
    } 
    }) 
}); 

（controller.js）になります

.controller('ParentCtrl', function($scope) { $scope.myValues = { value1:"some value", value2:"some other value" } }) .controller('PageOneCtrl', function($scope) { $scope.message = $scope.myValues.value1 }) .controller('PageTwoCtrl', function($scope) { $scope.message = $scope.myValues.value2 }) 

（firstpage.html又はseccondpage.html）

<ion-view view-title="First/Second Page"> 
    <ion-content> 

    <div id="mainMessage">{{message}}</div> 

</ion-content> 
</ion-view> 

オプション2：あなたは、このようなカスタムディレクティブを作成し、あなたのニーズにデータを置き換えることができます。この例では、DOMをmodする2つの方法を示します。

.directive("mydirective", function(){ 
     return { 
      template: "<h1>Hi, ...</h1>", // or use an html file here 
      replace: true, 
      restrict: 'A', 
      scope: false, //default 
      link: function(scope, element, attrs){ 
       console.log([scope],[element],[attrs]); 
       console.log(scope.myValues.value1); 
       /// use element from here 
       // do something... 
       // element.append("hello <br>") 
      } 
     } 
    }); 

、その後、あなたの.htmlファイルにあなたは

<div mydirective> </div> 

を含めるオプション3：これはAngularJSのビュー ...サービスや工場間でのコンテンツ/データを共有する私のお気に入りの方法です驚くべきものです。

.controller('yourPageCtrl', function($scope, myDataService) { 
    $scope.myData = myDataService; 
    $scope.message = "Hi "+$scope.myData.dataSetOne.name; 
    // do something here 
}); 

：ちょうどあなたがサービスと依存性注入が含まれることを確認してくださいあなたのコントローラで、その後

.service("myDataService", function() { 
    var myData = { 
     dataSetOne: { 
      name: "John Doe", 
      message: "hi, John", 
      other: "misc info" 
     },{ 
     dataSetTwo: { 
      name: "John Doe", 
      message: "hi, John", 
      other: "misc info"   
     } 
    } 
}) 

：サービスを作成し、複数のコントローラからのデータに瞬時に共有アクセスのためにそれを注入し、モジュールコントローラ

とあなたのDOMは、次のようになります。

<div id"someID">{{message}} </div> 

最終最悪のオプション、他のすべてが失敗した場合、$ rootScopeを使用することです。私は本当にそのアプローチを推奨していないので、必要に応じて研究にあなたを残すつもりです。

希望に役立ちます。

Answer 2

あなたは可能性があり、Cアプリのモジュールは、あなたがしたい2つの状態ページでreate：

var app = angular.module('myApp', ['ionic']); 
app.config(function($stateProvider) { 
    $stateProvider 
    .state('index', { 
    url: '/', 
    templateUrl: 'home.html' 
    }) 
    .state('music', { 
    url: '/music', 
    templateUrl: 'music.html' 
    }); 
}); 

はその後、アプリ起動時に、$ stateProviderは、URLを見て、それがインデックス状態と一致するかどうかを確認し、 してからhome.htmlをロードしようとします。

ページは指定されたURLで読み込まれます。 Angularでテンプレートを作成する簡単な方法の1つは、 をHTMLファイルに直接置き、構文を使用することです。だからここ は、我々のアプリにhome.htmlを置くための一つの方法である：テンプレートではなく がネットワークからそれらを取得するので、非常に高速にロードするためにキャッシュされますので、

<script id="home" type="text/ng-template"> 
    <!-- The title of the ion-view will be shown on the navbar --> 
    <ion-view view-title="Home"> 
    <ion-content ng-controller="HomeCtrl"> 
     <!-- The content of the page --> 
     <a href="#/music">Go to music page!</a> 
    </ion-content> 
    </ion-view> 
</script> 

これはやって良いです。