gpt4 book ai didi

javascript - 外部文件中的 AngularJs Controller 并使用路由

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

我查看了 SO,但没有任何帮助。

这是我的 app.js

var app = angular.module("qMainModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/anonHome/anonHome.html',
controller: 'templates/anonHome/anonHomeController'
})
.when("/about", {
templateUrl: 'templates/anonHome/anonAbout.html',
controller: 'templates/anonHome/anonAboutController'
})
.when("/services", {
templateUrl: 'templates/anonHome/anonServices.html',
controller: '/templates/anonHome/anonServicesController'
})
.when("/contact", {
templateUrl: 'templates/anonHome/anonContact.html',
controller: '/templates/anonHome/anonContactController'
})
.when("/register", {
templateUrl: 'templates/anonHome/anonRegister.html',
controller: '/templates/anonHome/anonRegisterController'
})
.when("/login", {
templateUrl: 'templates/anonHome/anonLogin.html',
controller: '/templates/anonHome/anonLoginController'
})

$locationProvider.html5Mode(true);
})



app.controller("qMainController", function ($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
});

路由按预期工作并且显示了部分模板,但部分模板 Controller 未被识别为函数。

布局模板是这样的

<!DOCTYPE html>
<html ng-app="qMainModule">
<head ng-controller="qMainController">
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Qiao :: {{Title}}</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


<script src="/scripts/angular.js"></script>
<script src="../scripts/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="templates/anonHome/anonHomeController.js"></script>



<!-- <link href="../styles/qiao.css" rel="stylesheet" /> -->


</head>
<body ng-controller="qMainController">
<div ng-include="qNavigationTemplatePath">

</div>

<!-- Page Content -->
<div class="container">
<ng-view></ng-view>
</div>

<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12" ng-controller="qMainController">
Copyright &copy; {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
</div>
</div>
</footer>

<div >
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>

</div>
</body>
</html>

部分模板如下所示:

<script src="anonHomeController.js"></script>

<div ng-controller="anonHomeController">

<h1>{{Title}}</h1>

</div>

它的 Controller 是这个

function anonHomeController($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
};

问题:如何让 Angular 识别和使用部分模板的 Controller ?

最佳答案

在定义 Controller 时,不要使用任何目录路径

来自docs - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

controller – {(string|Function)=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

请注意,已注册的 Controller 从来没有完整的路径,它是函数定义本身或函数的名称(字符串)。如果您像那样导出,您可能需要模块名称,但这与目录路径不同。

您只需要使用 <script> index.html 中的标签,其中将包含您的所有功能。现在,如果您的函数只是普通的 javascript,并且您不打算在那里使用 angular.module('app').controller,请在 app.js 中使用它,只需 angular.module('app').controller('anonHomeController ', anonHomeController);请注意,您的定义仍然可以保留在 Javascript 文件/some/path/totemplate/anonHomeController.js 中。我建议你尝试一下,看看它是否有效。

应用程序.js

    app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/main/main.html',
controller: 'MainCtrl'
})

index.html

<script src="controllers.js"></script>

Controller .js

function MainCtrl ($scope) {
$scope.name = 'World';

A working plnkr here

关于javascript - 外部文件中的 AngularJs Controller 并使用路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40234968/

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