Question

我有一个有两种观点的离子应用程序：

主页
活动

＆＃39; Home＆＃39;视图显示静态信息，其中包含用户登录“活动”的登录屏幕。他们可以从$ http请求到我的REST查看更新信息的页面。我可以在一个页面上进行调用，但是当我在主视图以外的视图上使用它时我不知道将控制器放在哪里，我不确定如何处理ng-app的重复规范;它被称为“家庭＆＃39;观看和活动＆＃39;图。

这是我的＆＃39; Home＆＃39;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>

    <!-- Only required for Tab projects w/ pages in multiple tabs 
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
    -->

  </head>
  <body ng-app="app" animation="slide-left-right-ios7">
  <div>
    <div>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </div>
</div>
  </body>

</html>

这是我的活动＆＃39;视图：

<ion-view title="Activity">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
   <div ng-app="app" ng-controller="users"> 
<div style="width:100%; text-align:center;">
<table class="pure-table">
  <thead>
  <tr><td>Device ID</td><td>First Name</td><td>Last Name</td><td>Activity</td></tr>
</thead>
<tbody>
  <tr ng-repeat="x in names">

    <td>{{ x.Regid }}</td><td>{{ x.Fname }}</td><td>{{ x.Lname }}</td><td>{{ x.activity }}</td>
  </tr>
  <tbody>
</tbody></tbody></table></div>

<button class="button button-full button-light" id="refresh">
 Refresh
</button>

</div>
<div class="bar bar-footer bar-stable">
  <div class="title"></div>
</div>

<script>
var app = angular.module('app', []);
app.controller('users', function($scope, $http, $interval) {
    $http.get("call to REST.php")
    .then(function (response) {$scope.names = response.data.records;});
    $interval(MyCtrl, 3000);
});
function callAtInterval(){
  //console.log("Interval Occured");
  //window.location.reload();
  //$state.reload();
}
function MyCtrl($scope )
{
    $scope.updateFromModel = 'Initial Value';
    setTimeout( function()
    {
        console.log( 'automatically update view?' );
        $scope.updateFromModel = "It's been updated";
        $scope.$apply();
    }, 1000 );
}
$('#refresh').click(function() {
    location.reload();
});
</script>

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

这是我的路线：

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

      .state('login', {
    url: '/home',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

  .state('activity', {
    url: '/activity',
    templateUrl: 'templates/activity.html',
    controller: 'activityCtrl'
  })

$urlRouterProvider.otherwise('/home')

});

Answer 1

您可以在controller.js文件中添加控制器，如下面的代码：

app.controller('MyController1', function($scope) {
    //write controller specific code here...
});

app.controller('MyController2', function($scope) {
    //write controller specific code here...
});
... so on

或者您可以在定义<script>模块后立即在app标记中定义：

var app = angular.module('app', []);
app.controller('MyController1', function($scope) {
    //write controller specific code here...
});

app.controller('MyController2', function($scope) {
    //write controller specific code here...
});
... so on

Answer 2

我只是想通了。控制器进入已经为活动路线建立的控制器下的controller.js。

Answer 3

您必须在隔离的js文件（controllers.js）中为每个视图/会话创建一个控制器，然后将其声明为应用程序的角度模块。查看官方的Ionic Framework Tutorial建议

https://ccoenraets.github.io/ionic-tutorial/create-angular-controller.html

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

 .controller('loginCtrl', function ($scope) {
    $scope.LoginForm = {};

    $scope.Login = function() {
        alert($scope.LoginForm.User);
        alert($scope.LoginForm.Password);
        location.href = "#tab/qr-reader";
    };      
})

更多控制器 ...

角度/离子视图 - 放置控制器的位置？

3 个答案: