Javascript AngularJS+；Ionic-将内容附加到其他页面/视图

我是angularjs和ionic的新手，我似乎不知道如何在单击按钮后将内容附加到另一个页面/视图。现在，一旦我点击“附加”按钮，内容就会出现在主页上按钮的下方，但我希望它出现在第二页上。有什么建议吗

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

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

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

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

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

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

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

欢迎浏览网页
追加
//文本“Hi”仅显示在主页上

controller.js

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

.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('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        
})

.controller（'SecondCtrl'，函数（$scope）{
$scope.AppendText=函数（）{
var myEl=angular.element（document.querySelector（'#divID'）；
myEl.append（'Hi
'）；
}
})

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

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

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

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

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

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

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

---

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

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加载的 将它们直接导入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>

这样做很好，因为模板将被缓存以实现非常快的加载，而不是

---

必须从网络上获取它们。

我认为这里的问题是，您仍然试图以jQuery风格的方式进行操作。这需要一种更具角度的方法

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

选项1: 如果您在应用程序中使用路由/状态，只需将抽象路由与控制器一起使用即可。将变量数据附加到抽象路由的控制器中将导致嵌套路由继承该$scope.your.variable

（app.js）

（controller.js）

（firstpage.html或seccondpage.html）

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

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

您的DOM将如下所示：

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

{{message}

最后一个也是最坏的选择是使用$rootScope，如果其他方法都失败了，我真的不推荐这种方法，因此如果需要的话，我将把它留给你们去研究

---

希望这能有所帮助。

是的，我以前在文档中看到过。这对我在上面尝试完成的工作有什么帮助？查看这张添加了HTML格式的动态模板页面。如果遇到麻烦，请告诉我。#3确实值得学习（没有那么大），因为你使用爱奥尼亚的次数越多，你必然会更多地使用它。如果你需要更多的实际帮助，我会使用skype（科尔曼杰夫）快速问题Jeffrey使用第三个选项，您可以使用字符串/文本在不同页面上共享和访问数据吗？例如，如果我想使用专栏？到目前为止，最好的解释是，我对服务一无所知。谢谢！顺便问一下，.factory和.service之间有什么区别？