AngularJS在同一頁面上有多個控制器-僅第一個有效

Question

以前我有一個類似的問題，但是這次，按照AngularJS的所有指南，我無法理解出了什么問題。

我有一個index.html文件，其中包含以下內容：

<!DOCTYPE html>
  <html>
  <head></head>
  <body ng-app="sportcial">
    <ion-tabs class="tabs-positive">
    <ion-tab icon="ion-home" ui-sref="home">
        <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-person" ui-sref="profile">
        <ion-nav-view name="profile">
        </ion-nav-view>
    </ion-tab>
    <ion-tab icon="icon-cashier" ui-sref="signin">
        <ion-nav-view name="signin"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-search" ui-sref="search">
        <ion-nav-view name="search"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="icon-messages" ui-sref="messages">
        <ion-nav-view name="messages"></ion-nav-view>
    </ion-tab>
        <button ng-click="openPopover($event)">Menu</button>
    </ion-tabs>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/config.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/controllers/HomeController.js"></script>
    <script src="js/controllers/MenuController.js"></script>
    <script src="js/controllers/SigninController.js"></script>
    <script src="js/controllers/WelcomeController.js"></script>
    <script src="js/controllers/ProfileController.js"></script>
  </body>
</html>

我忽略了頭部中的其他包含物，在關閉body標簽之前，它們沒有破壞任何東西。

我的app.js引導應用程序如下：

var app = angular.module('sportcial', ['ionic']);

app.run(function run($ionicPlatform, $rootScope, $state, FACEBOOK_APP_ID) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if (!window.cordova) {
            facebookConnectPlugin.browserInit(FACEBOOK_APP_ID);
        }

        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
    });
});

config.js，routes.js，services.js沒有重新聲明主模塊。

它們都是相同的概念：

app.config(function configApp($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
});

重用應用程序實例。

因此，問題在於擁有多個控制器，其中只有第一個實例化自己的控制器和其他實例被忽略。

這是我的控制器：

家庭作業：

app.controller('HomeController', function HomeController($scope) {
    alert(1); // works
});

這個已經不是：

app.controller('MenuController', function MenuController($scope, $ionicPopover) {
    alert(2);

    $ionicPopover.fromTemplateUrl('../views/menu.html', {
        scope: $scope
    }).then(function(popover) {    
        $scope.popover = popover;
    });

    $scope.openPopover = function($event) {
        $scope.popover.show($event);
    };

    $scope.closePopover = function() {
        $scope.popover.hide();
    };

    //Cleanup the popover when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.popover.remove();
    });

    // Execute action on hide popover
    $scope.$on('popover.hidden', function() {
        // Execute action
    });

    // Execute action on remove popover
    $scope.$on('popover.removed', function() {
        // Execute action
    });
});

有什么想法我在這里搞砸了嗎？

謝謝

Answer 1

我認為控制器的生命周期以及某些可用控制器存在一些混淆：“控制器控制視圖”！

像module.controller('ctrlname', fn)這樣的控制器定義只定義了一個控制器函數。 重要提示：該控制器功能尚不能與此一起運行，它只是通過您給它提供的名稱（例如，名稱）使它在角度環境中為人所知。 此處為“ ctrlname”。 它也尚未定義，此控制器將在何處運行。

然后，您必須將控制器與它所控制的視圖（= DOM元素= HTML Partial =模板）相關聯。 您可以通過幾種方式執行此操作：

使用ng-controller直接關聯
使用ui-router（或ng-router）狀態定義：它將定義的控制器與狀態中定義的視圖（= template）中的頂級標簽相關聯。
在指令定義中。
也許其他人？

控制器功能將在您將其關聯到的元素/部分/模板后立即運行。

每當與控制器關聯的標簽嵌套在包含另一個控制器的另一個標簽中時，注入到每個控制器中的$ scope就會彼此繼承。 這種原型繼承是一種從位於子元素上的另一個控制器訪問控制器范圍的數據的方法。

您也可以將controller as ctrlName語法。 這使您可以為控制器指定一個名稱，並可以通過從HTML模板為其指定的名稱直接訪問任何父控制器（只要嵌套得更深）。

因此，如果我正確理解了您的需求，則希望使菜單始終可見（在多個ui路由器狀態下）。 因此，正確的解決方案是僅通過使用HTML中的ng-controller ，將控制該菜單的控制器與菜單的頂級HTML標記關聯。

AngularJS在同一頁面上有多個控制器-僅第一個有效

問題描述

1 個解決方案

解決方案1
2 已采納 2015-03-28 10:13:06

AngularJS在同一頁面上有多個控制器-僅第一個有效

問題描述

1 個解決方案

解決方案1 2 已采納 2015-03-28 10:13:06

解決方案1
2 已采納 2015-03-28 10:13:06