如何使ui-router控制器正常工作？

Question

I've set up two simple URLs, with simple different templates and the same controller, but it doesn't work 我已经设置了两个简单的URL，它们具有简单的不同模板和相同的控制器，但是不起作用

HEAD: 头：

<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: HTML：

<body ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<div ui-view></div>

app.js: app.js：

angular
    .module("app", ["ui.router"])
    .controller("MainCTRL", MainCTRL)
    .config(configA);


function MainCTRL($location){
    this.nameApp = "nameApp";
}

routes.js: 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: login.htm：

<div>Header</div>

<div>Main</div>

<div>Footer</div>

{{name.nameApp}}

testingBlock.htm: testingBlock.htm：

 <h2>Hello goHenry</h2>

{{MainCTRL.nameApp}}

It doesn't display MainCTRL.nameApp 它不显示MainCTRL.nameApp

Answer 1

Wanted to show you where is the issue, but did not found any. 想要告诉您问题出在哪里，但没有发现任何问题。 But then I realized that the issue is inside of the state views. 但是后来我意识到问题出在状态视图之内。

There is a working version of your code . 您的代码有一个有效的版本。

All adjustments are really very small (not important). 所有的调整实际上都很小（不重要）。 The index.html 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>

The big one is here "controllerAs" 这里最大的是"controllerAs"

$stateProvider
    .state("/",{
       url: "/", 
       templateUrl : "testingBlock.htm",
       controller : "MainCTRL",
       controllerAs:"MainCTRL",
    })
    .state("login",{
        url: "/login",
        templateUrl : "app/templates/login.htm",
        controller : "MainCTRL",
        controllerAs:"name",
    });

So, what is different? 那么，有什么不同呢？ to support these statements: 支持以下声明：

{{name.nameApp}} in the "testingBlock.htm", “ testingBlock.htm”中的{{name.nameApp}} ，
{{MainCTRL.nameApp}} in the "app/templates/login.htm", {{MainCTRL.nameApp}} app / templates / login.htm“中的{{MainCTRL.nameApp}} ，

We need to use controllerAs and name as name or MainCTRL (compare your code and this example ) 我们需要使用controllerAs和name作为name或MainCTRL（比较您的代码和此示例）

NOTE: do not mix ng-controller and UI-Router states controllers. 注意：请勿混用ng-controller和UI-Router 状态控制器。 These should be different objects, because UI-Router can use other resolve then the angular native ng-controller . 这些应该是不同的对象，因为UI-Router可以使用其他解析方式，而不是angular native ng-controller 。 Later it could bring surprises... 后来可能会带来惊喜...

如何使ui-router控制器正常工作？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-02 11:11:03

如何使ui-router控制器正常工作？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-02 11:11:03

解决方案1
1 已采纳 2015-06-02 11:11:03