0

我在我的索引中声明了两个 HTML 页面：Home.html和jargon.html. 每个页面都在应用程序模块中加载了自己的控制器。

angular.module('starter', ['ionic', 'ngRoute', 'starter.homeController', 'starter.jargonController'])

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


$stateProvider

    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
    })
.state('jargon', {
        url: 'jargon',
        templateUrl: 'templates/jargon.html',
        controller: 'jargonCtrl'

    });
 $urlRouterProvider.otherwise('/home');

});

我的问题是 jargon.html 还有另外两个控制器：

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>
      <ion-pane ng-controller="CardsCtrl">
        <div class="testimage">
          <img ng-src="img/Logo.png" class="logo">
        </div>
          <swipe-cards on-card-swipe="onSwipe($event)">
            <swipe-cards>
              <swipe-card on-card-swipe="cardSwiped()" id="start-card">
              </swipe-card>
              <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
                <div ng-controller="CardCtrl">
                    <div class="image">
                      <img ng-src="{{card.image}}">
                    </div>
                    <div class="title">
                      {{card.Description}}
                    </div>
                </div>
              </swipe-card>
            </swipe-cards>
      </ion-pane>
</ion-content>

操纵卡片的控制器：

    .controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate) {
   var cardTypes = [
    {  image: 'img/cards/ASE card.png' },
    {  image: 'img/cards/MCR-card.png' },
    {  image: 'img/cards/R2A card.png' },
    {  image: 'img/cards/RRH card.png' }];

  $scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

  //intialisation premiere carte
var newCard = cardTypes[0];
    newCard.id = Math.random();
    $scope.cards.push(angular.extend({}, newCard));

  $scope.cardSwiped = function(index) {
    $scope.addCard();
  };

  $scope.cardDestroyed = function(index) {
    $scope.cards.splice(index, 1);
  };

  $scope.addCard = function() {
    var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
    newCard.id = Math.random();
    $scope.cards.push(angular.extend({}, newCard));
  }
})

.controller('CardCtrl', function($scope, $ionicSwipeCardDelegate) {
  $scope.goAway = function() {
    var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
    card.swipe();
  };
});

我的问题是：我在哪里可以同时调用CardsCtrl和CardCtrl？在同一个jargonController.js文件中？

4

1 回答 1

0

这是一个简单的例子：

<div ng-controller="HelloCtrl">
    <p>{{fromService}}</p>
</div>
<br />
<div ng-controller="GoodbyeCtrl">
    <p>{{fromService}}</p>
</div>

JavaScript：

//angular.js example for factory vs service
var app = angular.module('myApp', []);


app.service('testService', function(){
    this.sayHello= function(text){
        return "Service says \"Hello " + text + "\"";
    };        
    this.sayGoodbye = function(text){
        return "Service says \"Goodbye " + text + "\"";
    };   
});

function HelloCtrl($scope, testService)
{
    $scope.fromService = testService.sayHello("World");
}

function GoodbyeCtrl($scope, testService)
{
    $scope.fromService = testService.sayGoodbye("World");
}

http://jsfiddle.net/Ne5P8/2701/

于 2016-03-31T12:59:59.323 回答