javascript - AngularJS + Ionic - 将内容 append 到另一个页面/ View

Question

我是 angularjs 和 ionic 的新手，我似乎无法弄清楚如何在单击按钮后将内容 append 到另一个页面/ View 。现在，一旦我单击“append ”按钮，内容就会出现在主页按钮下方，但我希望它出现在第二页上。有什么建议吗？

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>

controller.js

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

tab-second.html

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

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

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

Answer 1

我认为这里的问题是您仍然试图以 jQuery 风格的方式做事。这需要一种更具 Angular 的方法。

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

选项 1:如果您在您的应用程序中使用路由/状态，您可以简单地使用带有 Controller 的抽象路由。在抽象路由的 Controller 中 append 变量数据将导致嵌套路由继承 $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:这是我最喜欢的在 View 之间共享内容/数据的方式...AngularJS 中的服务或工厂非常棒。创建一个服务，并将其注入(inject)到模块 Controller 中，以实现对来自多个 Controller 的数据的即时共享访问:

.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 中确保包含服务和依赖项注入(inject):

.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。我真的不推荐这种方法，因此如果需要的话，我会把它留给你去研究。

希望对您有所帮助。