Angular ui-router 多个视图和控制器答案

【问题标题】：Angulart ui-router Multiply views and ControllerAsAngular ui-router 多个视图和控制器
【发布时间】：2016-03-28 19:15:35
【问题描述】：

使用多个嵌套视图和 ControllerAs 时遇到问题

这里是我的咖啡脚本和模板示例

州：

  .state "users" ,
    abstract: true,
    url:"/users",
    views:
      "MainLayout":
        templateUrl:"users.html",
  .state "users.add" ,
    url:"/users-add",
    views:
      "ContentLayout":
        templateUrl:"users-add.html",
        controller:"UsersAddController",
        contollerAs:"formctrl",
      "SideLayout":
        templateUrl:"users-side.html",
    cache: false
  .state "users.list" ,
    url:"/users-list",
    views:
      "ContentLayout":
        templateUrl:"users-list.html",
        controller:"UsersController",
        contollerAs:"userlist"
      "SideLayout":
        templateUrl:"users-side.html",
    cache: false

users.html

<div class="content" ui-view="ContentLayout"></div>
<div class="side" ui-view="SideLayout"></div>

用户列表.html

{{ userlist.result }}

users-add.html

{{ formctrl.addresult }}

users-side.html

<menu>
<a ui-sref="users.list">List</a>
<a ui-sref="users.add">Add</a>
</menu>

UsersController 作为示例

(->
  UsersController = ()->
    vm = @
    vm.result = "Result"
    return vm
  angular
  .module("myapp")
  .controller("UsersController", UsersController))()

这根本不工作，但如果我用 $scope 做，一切正常。我做错了什么？

【问题讨论】：

为什么要在控制器中返回 vm？
因为没有该 cotrollerAs 语法将无法工作。

标签： angularjs coffeescript angular-ui-router

【解决方案1】：

在子视图上，您将覆盖父视图，因此您必须使用 @ simbol 试试这个：

.state "users.add" ,
    url:"/users-add",
    views:
      "ContentLayout@":
        templateUrl:"users-add.html",
        controller:"UsersAddController",
        contollerAs:"formctrl",
      "SideLayout@":
        templateUrl:"users-side.html",
    cache: false
  .state "users.list" ,
    url:"/users-list",
    views:
      "ContentLayout@":
        templateUrl:"users-list.html",
        controller:"UsersController",
        contollerAs:"userlist"
      "SideLayout@":
        templateUrl:"users-side.html",

好的，现在我看到了你的 plunker，因为你在 ui-views 中使用 ui-views，所以你必须包含要覆盖或定位的内容：

state "users.add" ,
    url:"/users-add",
    views:
      "ContentLayout@users":
        templateUrl:"users-add.html",
        controller:"UsersAddController",
        contollerAs:"formctrl",
      "SideLayout@users":
        templateUrl:"users-side.html",
  .state "users.list" ,
    url:"/users-list",
    views:
      "ContentLayout@users":
        templateUrl:"users-list.html",
        controller:"UsersController",
        contollerAs:"userlist"
      "SideLayout@users":
        templateUrl:"users-side.html",

所以我将 ContentLayout '@' 定位在用户状态。

这是你的固定插件http://plnkr.co/edit/vPdjntVJn9dVE9Y7mkm3?p=preview

希望对你有帮助

【讨论】：

根本没有帮助我。空白页。Smth 错误，我无法解决这个问题大约 2 天 :( 我尝试了很多组合
您能否发布带有@符号的整个配置。如果你能放一个笨拙的人，那就太好了
plnkr.co/edit/2WwcWOKoej7LExn8yWrh 没有@，它只工作了一半。你可以用@来做，什么都行不通（我想我是在 plunker 上创建的）
已修复？我认为当我在不同状态下获得“Hello World”和“Fizz Buzz”时它已修复。我只能看到 Hello 和 Fizz {{ formctrl.addresult }}。又出了问题：（
尝试不同的东西后发现这个github.com/angular-ui/ui-router/issues/1880

【解决方案2】：

正如 Sudakatux 在 cmets 中所说，有一个 issue on angular-ui-router github

太棒了，我切换到另一个路由器，可以正常使用 Coffee 和 controllerAs（必须返回 @）。

否则，您必须重构您的应用 - 使用纯 js 或在模板中使用 ng-controller 制作它

【讨论】：