调用另一个控制器Angularjs中的控制器

call a controller inside another controller Angularjs

本文关键字：控制器 Angularjs 调用 另一个      更新时间：2023-10-30

我在索引中声明了两个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文件中？

这里有一个简单的例子：

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

相关文章：