Javascript AngularJS在同一页上有多个控制器-只有第一个可以工作_Javascript_Angularjs

Javascript AngularJS在同一页上有多个控制器-只有第一个可以工作

javascript angularjs

Javascript AngularJS在同一页上有多个控制器-只有第一个可以工作,javascript,angularjs,Javascript,Angularjs,以前我有一个类似的问题，但这次，遵循AngularJS的所有指导原则，我不明白哪里出了问题我有一个包含以下内容的index.html文件： <!DOCTYPE html> <html> <head></head> <body ng-app="sportcial"> <ion-tabs class="tabs-positive"> <ion-tab icon="ion-home" ui-sr

以前我有一个类似的问题，但这次，遵循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>

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
    });
});

知道我搞砸了什么吗

谢谢

我认为对于控制器的生命周期和某个控制器的可用位置存在一些混淆：“控制器控制视图”

像

module.controller（'ctrlname'，fn）

这样的控制器定义只定义了一个控制器函数。重要提示：此控制器功能将不会与此一起运行，它只是通过您给它的名称向angular environment显示，例如此处的“ctrlname”。它还没有定义，这个控制器将在哪里运行

然后，必须将控制器与其控制的视图（=DOM元素=HTML部分=模板）相关联。您可以通过以下几种方式完成此操作：

使用

ng controller

将其直接关联

使用ui路由器（或ng路由器）状态定义：它将您定义的控制器与您在状态中定义的视图（=模板）中的顶级标记相关联

在指令定义中

也许其他人

然后，只要将其关联到的元素/部分/模板呈现出来，控制器函数就会立即运行

每当控制器关联的标记嵌套在另一个包含另一个控制器的标记中时，注入到这些控制器中的$scope就会相互继承。这种原型继承是一种从另一个控制器（位于子元素上）访问控制器作用域数据的方法

您还可以将

控制器用作ctrlName

语法。这允许您为控制器指定一个名称，并允许您通过从HTML模板中指定的名称直接访问任何父控制器（只要嵌套得更深）

因此，如果我正确理解您的需求，您希望菜单始终可见（在多个ui路由器状态下）。因此，正确的解决方案是使用HTML中的

ng controller

将控制该菜单的控制器与菜单的顶级HTML标记关联。

我看不到任何地方正在使用您的控制器！你能给我看看你的控制器的html代码吗？我首先要谈的是实例化问题。当它实际加载时，我将开始使用它。我删除了逻辑和用法，以测试裸控制器是否可以工作。它们是通过脚本标记加载的，而不是ng控制器指令，其他控制器的响应方式必须与HomeController相同。它们应该触发警报功能除非您在htmlI中使用它，否则没有必要触发第二控制器中的警报。我已经添加了MenuController.js的全部内容。它的用法在index.html按钮的ng click指令中：openPopover（$event）。这就是我想要达到的目标。打开具有嵌套视图的popover。

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
    });
});