간단한 다른 템플릿과 동일한 컨트롤러를 사용하여 두 개의 간단한 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";
}
route.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}} "testingBlock.htm"에서{{MainCTRL.nameApp}} "app / templates / login.htm"에서controllerAs와 name을 name 또는 MainCTRL로 사용해야합니다 (코드 와이 예제 비교 ).
참고 : 컨트롤러를 혼합 ng-controller및 UI-Router 상태 표시 하지 마십시오 . 앵귤러 네이티브 다음 UI-Router다른 해상도 를 사용할 수 있기 때문에 이들은 다른 객체 여야합니다 ng-controller. 나중에 그것은 놀라움을 가져올 수 있습니다 ...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다