gpt4 book ai didi

javascript - 同一页面上的 AngularJS 多个 Controller - 只有第一个有效

转载 作者:行者123 更新时间:2023-11-30 16:58:11 27 4
gpt4 key购买 nike

以前我有过类似的问题,但是这次,按照 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 部分 = 一个模板)相关联。您可以通过多种方式做到这一点:

  1. 使用ng-controller直接关联
  2. 使用 ui-router(或 ng-router)状态定义:它将您定义的 Controller 与您在状态中定义的 View (=模板)中的顶级标签相关联。
  3. 在指令定义中。
  4. 也许其他人?...

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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com