AngularJS + Ionic - İçeriği başka bir sayfaya ekleme/görüntüleme

Question

Angularjs ve iyonic için yeniyim ve bir düğmeye bastığımda içeriğin başka bir sayfaya nasıl ekleneceğini anlayamıyorum. Şu anda "ekle" düğmesini tıkladığımda içerik ana sayfanın düğmesinin altında görünüyor ancak ikinci sayfada görünmesini istiyorum. Baska öneri?

sekme 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/>');  
    } 
}) 

sekme second.html

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

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

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

Answer 1

Burada sorun şu ki hala jQuery tarzı bir şekilde şeyler yapmaya çalışıyorum. Bunun daha açısal bir yaklaşıma ihtiyacı var.

Orada bu ele verebilir birkaç yolu vardır ancak doğru yolu vb uygulamanızın işlevselliği/düzeni/stil bağlıdır

Seçenek 1: sizin uygulamasında kullanarak yönlendirme/eyaletler ise Bir kontrolör ile basit bir yol kullanabilirsiniz. soyut rotanın kumanda içinde değişken veri ekleme iç içe yolları

o $ scope.your.variable

(app.js) miras

.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) neden olur

.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 veya seccondpage.html)

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

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

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

Seçenek 2: Bunun gibi özel bir yönergeye sahip olabilir ve verileri gereksinimlerinize göre değiştirebilirsiniz. Bu örnek DOM'ınızı modifiye etmenin iki yolunu göstermektedir.

.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>") 
      } 
     } 
    }); 

ve sonra .html dosyasında Eğer

<div mydirective> </div> 

Seçenek 3 şunlardır: Buangularjs görünümler ... Hizmetler veya fabrika arasındaki içerik/veri paylaşımını benim favori yolu inanılmazlar.

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

: Sadece hizmeti ve bağımlılık enjeksiyonu içerir emin olun sizin denetleyicisi sonra

.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"   
     } 
    } 
}) 

: Bir hizmeti oluşturun ve birkaç denetleyicileri verilerine anında paylaşılan erişim için enjekte ve modül kontrolör

ve DOM şu şekilde görünecektir: tüm başka başarısız olursa

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

Son ve en kötü seçenek, $ rootScope kullanmaktır. Bu yaklaşımı gerçekten tavsiye etmiyorum ve bu yüzden gerekirse araştırmak için size bırakacağım.

Bu yardımcı olur umarım.

Answer 2

Yapabilirsin c

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

Sonra uygulama başlangıcında üzerinde, $ stateProvider endeksin durumunu uyuyorsa, bkz url bakmak ve sonra home.html yüklemeye çalışır: İstediğiniz iki devlet sayfaları ile uygulama modülü REATE içine .

Sayfalar, verilen URL'lere göre yüklenir. Angular'de şablon oluşturmak için basit bir yol, onları doğrudan HTML dosyanıza koymak ve sözdizimini kullanmaktır.

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

Bu şablon çok hızlı yüklenmesi için önbelleğe olacak çünkü yapmak iyidir, yerine ağdan bir şekilde alın zorunda: Yani burada bizim app içine home.html koymak için bir yoludur.