gpt4 book ai didi

javascript - AngularJS 在同一 View 中使用两个 Controller

转载 作者:行者123 更新时间:2023-12-03 12:24:34 25 4
gpt4 key购买 nike

我正在尝试使用 AngularJS Web 应用程序。我买了一个模板,它的所有 Controller 、路由和指令都在一个文件 app.js

这是我的第一个 angularJS 应用程序,或者实际上是我的第一个前端工作。现在正在努力成为一名全栈极客..:D

所以现在我陷入了困境。该应用程序工作完全正常,但是当我在另一个文件 auth.js 中添加新 Controller AuthCtrl 时,它给我一个错误,说 AppCtrl not成立。遵循 HTML 将使您更好地理解它。我已经在代码片段中指出了确切的问题所在。

<!doctype html>
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PropheSee Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">
<!-- Needs images, font... therefore can not be part of main.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
<!-- end Needs images -->

<link rel="stylesheet" href="styles/main.css">

</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">

<div data-ng-controller="AuthCtrl" data-ng-app="app">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
<%-body%>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scripts/vendor.js"></script>

<script src="scripts/ui.js"></script>

<script src="scripts/app.js"></script>


<!--
This is where the problem is. As soon as I add the following line to use AuthCtrl,
It says AppCtrl not found. Is it that I can't use more than one import for controllers? Or is there a problem in the way I am doing the imports?
-->
<script src="scripts/controllers/auth.js"></script>

</body>

编辑 - AuthCtrl

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

app.controller('AuthCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});

App.js 片段

(function() {
"use strict";
angular.module("app.chart.ctrls",[])
.controller("chartCtrl",[
"$scope",
function($scope){ ....

最佳答案

问题是您在 auth.js 文件中执行此操作:

var app = angular.module('app',.......

从而声明一个新应用程序或覆盖 app.js 中声明的应用程序

相反,您应该使用 app.js 文件中定义的相同应用程序变量。

您需要声明应用程序并将对其的引用存储在变量中:

var yourApp = angular.module("app.controllers",[.........]);

然后要添加 Controller ,请将它们分配给“保存”应用程序定义的变量。这是在yourApp应用程序上定义chartCtrl Controller 的方式:

yourApp.controller("chartCtrl",[
"$scope",
function($scope){ ....

然后你的 Controller 在你的 auth.js 文件中:

yourApp.controller('AuthCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});

关于javascript - AngularJS 在同一 View 中使用两个 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24273199/

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