UI-Router 多个视图单个控制器不起作用

本文介绍了UI-Router 多个视图单个控制器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用一个在视图中定义的控制器，但是 $scope 没有定义任何东西.有没有办法做到这一点?请分享一个简单的例子以便理解.

I would like to use one controller defined in views, but the $scope does not define anything. Is there a way to do this? Please share a simple example in order to understand.

我有这个 index.html

I have this index.html

<body ng-app="ehc">
<h1>{{home}}+{{a}}+{{b}}</h1>
<ion-side-menus enable-menu-with-back-views="false" delegate-handle="left">
    <!-- Left menu -->
    <ion-side-menu side="left" is-enabled="true">

            <ion-header-bar class="bar-stable">AAA</ion-header-bar>
            <ion-content>
                <div class="list">
                    <div class="item item-divider">
                        Candy Bars
                    </div>
                </div>
            </ion-content>


    </ion-side-menu>

    <ion-side-menu-content edge-drag-threshold="true" drag-content="true">
        <!-- Main content, usually <ion-nav-view> -->
        <ion-nav-bar class="bar-positive" >
            <ion-nav-title>
                <h2>hello world title *{{home}}*</h2>
            </ion-nav-title>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

            <ion-view>
                <ion-content class="has-header">
                    <div class="row">
                        <div class="col-50">
                            <div ui-view="a"></div>
                        </div>
                        <div class="col-50">
                            <div ui-view="b"></div>
                        </div>
                    </div>

                </ion-content>
            </ion-view>


</ion-side-menu-content>

<script type="text/ng-template" id="templates/a.html">
   <ion-view>
       <ion-content class="has-header">
           **{{a}}**
       </ion-content>
   </ion-view>
</script>

<script type="text/ng-template" id="templates/b.html">
   <ion-view>
       <ion-content class="has-header">
           **{{b}}**
       </ion-content>
   </ion-view>
</script>
</body>
<script src="js/app.js"></script>

这是我的模型定义app.js

var app = angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider, $stateProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider.state('Home', {
    url: '/',
    controller: "HomeCtrl",
    //template:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>",
    views: {
      "a": {
        templateUrl: 'templates/a.html'
      },
      "b": {
        templateUrl: 'templates/b.html'
      }
    }
  });


}).controller("HomeCtrl", ["$scope", "$ionicSideMenuDelegate",
  "$routeParams", "config", "$q", "$http"], function ($scope, $ionicSideMenuDelegate, $routeParams, config, $q, $http) {


  $scope.toggleLeft = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };

  //carico le lingue e il menu
  console.log("AAAAAAAAAAAA");
  $scope.home = "Pippo";
  $scope.a="XAX";
  $scope.b="XBX";
})

console 是空的，也是 html 模板中的范围.如果您有解决方案，请使用非常简单的示例.

console is empty and also the scope in html template. Please if you have the solution, use very simple example.

我在这里读过，我认为它有效 Rakrap Jaknap 于 2015-04-17 08:01 回答

I've read here and I thought it worked Rakrap Jaknap answered on 2015-04-17 08:01

这里的重点是:

Controller 永远属于 View，从不属于 state.

换句话说，要使用相同类型的控制器(但每个视图有两个实例)，我们必须进行这种声明:

Other words, to use same type of controller (but two instances for each view), we have to do that kind of declaration:

 $stateProvider.state('Home', {
    url: '/',

    // instead of this
    //controller: "HomeCtrl",

    views: {
      "a": {
        templateUrl: 'templates/a.html',
        controller: "HomeCtrl", // we need this
      },
      "b": {
        templateUrl: 'templates/b.html',
        controller: "HomeCtrl", // and also this
      }
    }
  });

如果我们想在多个视图之间共享一些东西，我们需要不同于同一个控制器"的技术.见:

In case, we want to share some stuff among many views, we need different technique than "same controller". See:

另一个见解，可以在这里介绍:

Another insight, could be covered here:

包括打字稿在内，有详细的描述和示例，所有视图/状态如何针对一些常见的 RootModel

And including typescript, there is a detailed description and example how all views/states could target some common RootModel

这篇关于UI-Router 多个视图单个控制器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

RootModel

UI-Router 多个视图单个控制器不起作用

问题描述

推荐答案