以前我有过类似的问题，但是这次，按照 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 标签之前省略了 head 中的其他内容，它们没有破坏任何东西。
我的 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');
});
重用应用实例。
所以问题在于拥有多个 Controller ，其中只有第一个实例化自身而其他实例被忽略。
这是我的 Controller :
家庭作品:
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
});
});
知道我在这里搞砸了什么吗？
谢谢
最佳答案
我认为对于 Controller 的生命周期和某个 Controller 可用的位置存在一些混淆:“ Controller 控制 View ”!
像 module.controller('ctrlname', fn) 这样的 Controller 定义只是定义了一个 Controller 函数。重要提示:这个 Controller 功能还不会运行，它只是通过你给它的名字让 Angular 环境知道它，例如。 'ctrlname' 在这里。它也尚未定义，该 Controller 将在何处运行。
然后您必须将您的 Controller 与它正在控制的 View (= 一个 DOM 元素 = 一个 HTML 部分 = 一个模板)相关联。您可以通过多种方式做到这一点:
- 使用
ng-controller直接关联 - 使用 ui-router(或 ng-router)状态定义:它将您定义的 Controller 与您在状态中定义的 View (=模板)中的顶级标签相关联。
- 在指令定义中。
- 也许其他人？...
Controller 功能会在您将其关联到的元素/部分/模板呈现后立即运行。
只要 Controller 关联的标签嵌套在包含另一个 Controller 的另一个标签中，注入(inject)到每个 Controller 中的 $scope 就会相互继承。这种原型(prototype)继承是一种从位于子元素上的另一个 Controller 访问 Controller 作用域数据的方法。
您还可以使用 controller as ctrlName 语法。这允许您为您的 Controller 命名，并允许您通过您从 HTML 模板中提供的名称直接访问任何父 Controller (只要您嵌套得更深)。
因此，如果我正确理解您的需求，您希望菜单始终可见(在多个 ui-router 状态下)。因此，正确的解决方案是通过在 HTML 中使用 ng-controller 将控制该菜单的 Controller 与菜单的顶级 HTML 标记相关联。
关于javascript - 同一页面上的 AngularJS 多个 Controller - 只有第一个有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29314190/