如何将文件夹中包含的控制器动态绑定到angularjs中的视图
How to bind controllers contained in a folder to views in angularjs dynamically
我在根目录名为controller的文件夹中有一个控制器。当管线更改时,我有要附加到相应视图的视图。我正在使用angular ui路由器。
控制器/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>
login.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>
Controllers/LoginController.js
angular.module('subsd',["ngCookies"]).controller('loginController', ['$http','$scope','$cookies',function($http,$scope,$cookies) {})]);
如果我在loginController.js中提到"sub"而不是"subsd",则路由将停止工作。
最终答案包括几件事:
- 从login.html模板文件中删除
<div ng-controller="loginController">
- 将
'ngCookies'
依赖关系移动到controllers/one.js文件(angular.module('sub',["ui.router", "ngCookies"])
)中的sub
模块定义 - 在controller/logincontroller.js文件中,再次将模块名称从
subsd
更改回sub
,并从sub
模块调用中删除第二个参数,使其看起来像这样:angular.module('sub').controller(...)
之前更改模块名称时,试图重新定义,这是一个错误。
这个
angular.module('moduleName', [...dependencies])
是模块设置器,而这个
angular.module('moduleName')
是模块getter。
你的意思是:
$stateProvider
.state('index', {
url: "/login",
views: {
"viewA": {
templateUrl: "login.html",
// THIS ?
controller: "LoginController"
}
}
})
})
另外请记住从视图中删除ng-controller
属性。
相关文章:
- 将值动态绑定到jquery中的切换按钮
- 如何使用AnguarJS动态绑定网站数据
- 在extJS 4.2中,有没有一种方法可以将模型值动态绑定到表单
- 我想在ext.js4.2中将树存储动态绑定到树面板中
- 如何让 AngularJS 选取在 JavaScript 中创建的动态绑定
- Emberjs - 将参数动态绑定到视图
- KnockoutJS删除动态绑定
- jquery验证,动态绑定表单验证
- 如何将文件夹中包含的控制器动态绑定到angularjs中的视图
- 在JavaScript中创建动态绑定
- Jquery:如何动态绑定带有onload事件的文本框
- 通过json动态绑定作用域到ng模型
- 如何将变量与函数动态绑定
- 如何在数据绑定视图中模板化If Else结构
- jQuery动态绑定文件输入并在函数中检索文件
- 动态绑定onclick事件为for循环中的所有按钮提供相同的值
- typeahead选择事件(jQuery)的动态绑定
- 如何使用 AngularJS 将值动态绑定到链接
- 显示具有 MVC 数据绑定视图模型 ASP.NET JQuery 对话框的最佳方式
- 在jQuery上动态绑定函数