如何将文件夹中包含的控制器动态绑定到angularjs中的视图
Posted
技术标签:
【中文标题】如何将文件夹中包含的控制器动态绑定到angularjs中的视图【英文标题】：How to bind controllers contained in a folder to views in angularjs dynamically 【发布时间】：2015-02-25 18:47:10 【问题描述】：我在根目录下名为 controller 的文件夹中有一个控制器。 当路线发生变化时，我想附加到相应的视图。我正在使用 angular-ui-router。
控制器/one.js
angular.module('sub',["ui.router"]).config(function($stateProvider)
$stateProvider
.state('index',
url: "/login",
views:
"viewA":
templateUrl: "login.html"
)
.state('register',
url: "/register",
views:
"viewA":
templateUrl: "register.html"
)
.state('upload',
url: "/upload",
views:
"viewA":
templateUrl: "upload.html"
)
)
test.html
<!DOCTYPE html>
<html ng-app="sub">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="register">Register</a></li>
<li><a ui-sref="upload">upload</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view="viewA"></div>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controllers/one.js"></script>
<script type="text/javascript" src="angular-cookies.js"></script>
<script type="text/javascript" src="Controllers/loginController.js"></script>
<script type="text/javascript" src="Controllers/uploadController.js"></script>
<script type="text/javascript" src="Controllers/registerController.js"></script>
<script type="text/javascript" src="angular-ui-router.js"></script>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</body>
</html>
登录.html
<div ng-controller="loginController">
<p>
UserName:
<input id="director" type="text" ng-model="mUserName"/>
</p>
<p>
Password:
<input id="actor" type="text" ng-model="mPassWord"/>
</p>
<button ng-click="login()">Login</button>
</div>
控制器/LoginController.js
angular.module('subsd',["ngCookies"]).controller('loginController', ['$http','$scope','$cookies',function($http,$scope,$cookies) )]);
如果我在 loginController.js 中提到“sub”而不是“subsd”，则路由将停止工作。
【问题讨论】：
【参考方案1】：最终的答案包括几件事要做：
-
从 login.html 模板文件中删除
<div ng-controller="loginController">。
将 'ngCookies' 依赖项移动到 controllers/one.js 文件 (angular.module('sub',["ui.router", "ngCookies"])) 中的 sub 模块定义。
在 controllers/logincontroller.js 文件中将模块名称从 subsd 更改为 sub 并从 sub 模块调用中删除第二个参数，使其看起来像这个：angular.module('sub').controller(...)。
当您之前更改模块名称时，您试图重新定义它，这是一个错误。
这个
angular.module('moduleName', [...dependencies])
是模块setter，而this
angular.module('moduleName')
是模块getter。
【讨论】：
我犯了这些错误，同时使代码模块化。当我将所有控制器放在一个文件中时，一切都运行良好。感谢您指出代码中的问题。【参考方案2】：你的意思是：
$stateProvider
.state('index',
url: "/login",
views:
"viewA":
templateUrl: "login.html",
// THIS ?
controller: "LoginController"
)
)
另外记得从视图中删除 ng-controller 属性。
【讨论】：
我试过这个，但它不起作用。我的控制器也在一个名为 Controllers 的文件夹中。 描述“不起作用”。 究竟是什么不起作用？您在控制台中遇到任何错误吗？ 我遇到这个错误，Error: [ng:areq] errors.angularjs.org/1.2.26/ng/… at Error (native) 您用大写字母“LoginController”定义了您的控制器，并尝试将其与第一个字母一起包含为非大写“loginController”。 很重要。还记得使用<script src="Controllers/LoginController.js"></script> 包含控制器文件。
我已经进行了更改，但仍然抛出相同的错误以上是关于如何将文件夹中包含的控制器动态绑定到angularjs中的视图的主要内容，如果未能解决你的问题，请参考以下文章
如何获取标签栏控制器中包含的所有视图控制器？ iphone开发
如何将引导模板集成到Angular中，请以正确的方式举例[关闭]
如何使用 .Net 4.0 中包含的 HttpClient 类将文件上传到在 IIS Express 中运行的 Asp.Net MVC 4.0 操作