您将特定于页面的脚本放在 Ionic 中的什么位置？

Question

我正在用 ionic 制作一个应用程序，每个页面都有 JS 脚本。例如，一个页面有一个脚本可以根据一天中的时间更改消息，而另一个页面有一个 jQuery .load() 脚本。两者似乎都不起作用。它们是 DOM-操纵性的，位于页面底部。

<ion-view view-title="Welcome" style="text-align:center; padding:20px;">
  <ion-content>
    <h1 id="time">Hello!</h1>
      <p>Welcome to the app. We are thrilled to share our new app with you!</p>
  </ion-content>
   <script>
       date = new Date();
       var hours = date.getHours();
       console.log(hours);
       if (hours >= 5 && hours <= 11) //MESSAGE FOR MORNING
document.getElementById('time').innerHTML = 'Good Morning.';
else if (hours >= 12 && hours <= 17) //MESSAGE FOR AFTERNOON
document.getElementById('time').innerHTML = 'Good Afternoon.';
else if (hours >= 18 && hours <= 20) //MESSAGE FOR EVENING (6pm-8pm)
document.getElementById('time').innerHTML = 'Good Evening.';
else //MESSAGE FOR NIGHT (9pm-4am)
document.getElementById('time').innerHTML = 'Good Night.';</script> 
</ion-view>

Controllers.js:

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});

Answer 1

您将脚本放在 controller.js 文件中。您添加以下代码：

.controller('PageCtrl', function($scope){
//Insert function code here
})

在 ionic 页面上，在 <ion-view> 参数中，您将 "ng-controller" 设置为 PageCtrl。在你的 DOM-manipulating div 里面，你放了类似 <div>{{hello}}</div> 的东西。然后通过在控制器内部使用 $scope.hello = "Your String"; 来操作 DOM 元素来完成这一切。

您将特定于页面的脚本放在 Ionic 中的什么位置？

Where do you put page-specific scripts in Ionic?

javascript

jquery

angularjs

ionic