Question

我是angularjs和ionic的新手，一旦点击按钮，我似乎无法弄清楚如何将内容附加到其他页面/视图。现在，一旦我点击＆＃34;追加＆＃34;按钮内容显示在主页上的按钮下方，但我希望它显示在第二页上。有什么建议吗？

标签-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风格的方式做事仍然存在。这需要更多的Angular方法。

有几种方法可以解决这个问题，但正确的方法取决于您的应用的功能/布局/风格等。

选项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的方法。

.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中的服务或工厂非常棒。创建一个服务，并将其注入模块控制器，以便对来自多个控制器的数据进行即时共享访问：

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

然后在您的控制器中确保包含服务和依赖注入：

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

你的DOM看起来像这样：

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

最后和最差选项，如果一切都失败了，就是使用$ rootScope。我真的不推荐这种方法，因此如果需要，我会留给你研究。

希望有所帮助。

Answer 2

您可以使用所需的两个状态页面创建应用程序模块：

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

然后在app start上，$ stateProvider将查看url，看它是否与索引状态匹配，然后尝试将home.html加载到。

页面由给定的URL加载。在Angular中创建模板的一种简单方法是放置它们直接进入您的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>

这样做很好，因为模板将被缓存以实现非常快速的加载，而不是必须从网络上获取它们。

AngularJS + Ionic - 将内容附加到另一个页面/视图

2 个答案: