![](/img/trans.png)
[英]How can I test an AngularJS controller that relies on a service, using ui-router?
[英]How can I make ui-router controller to work?
我已經設置了兩個簡單的URL,它們具有簡單的不同模板和相同的控制器,但是不起作用
頭:
<script src="jsLib/angular_v1.4.js" type="text/javascript"></script>
<script src="jsLib/angular-ui-router.min.js" type="text/javascript"></script>
<script src="routes.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
HTML:
<body ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<div ui-view></div>
app.js:
angular
.module("app", ["ui.router"])
.controller("MainCTRL", MainCTRL)
.config(configA);
function MainCTRL($location){
this.nameApp = "nameApp";
}
routes.js:
function configA($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("/",{
url: "/",
templateUrl : "/testingBlock.htm",
controller : "MainCTRL"
})
.state("login",{
url: "/login",
templateUrl : "/app/templates/login.htm",
controller : "MainCTRL"
});
}
login.htm:
<div>Header</div>
<div>Main</div>
<div>Footer</div>
{{name.nameApp}}
testingBlock.htm:
<h2>Hello goHenry</h2>
{{MainCTRL.nameApp}}
它不顯示MainCTRL.nameApp
想要告訴您問題出在哪里,但沒有發現任何問題。 但是后來我意識到問題出在狀態視圖之內。
所有的調整實際上都很小(不重要)。 index.html
<html ng-app="app" >
<head>
<title>my app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
></script>
<script src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
></script>
<script src="routes.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<br><a href="#/">#/</a> - default
<br><a href="#/login">login</a>
<hr><div ui-view=""></div>
</body>
</html>
這里最大的是"controllerAs"
$stateProvider
.state("/",{
url: "/",
templateUrl : "testingBlock.htm",
controller : "MainCTRL",
controllerAs:"MainCTRL",
})
.state("login",{
url: "/login",
templateUrl : "app/templates/login.htm",
controller : "MainCTRL",
controllerAs:"name",
});
那么,有什么不同呢? 支持以下聲明:
{{name.nameApp}}
, {{MainCTRL.nameApp}}
app / templates / login.htm“中的{{MainCTRL.nameApp}}
, 我們需要使用controllerAs和name作為name或MainCTRL(比較您的代碼和此示例 )
注意:請勿混用ng-controller
和UI-Router
狀態控制器。 這些應該是不同的對象,因為UI-Router
可以使用其他解析方式,而不是angular native ng-controller
。 后來可能會帶來驚喜...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.