Angularjs UI路由器多视图单个控制器不工作_Angularjs_Ionic Framework_Angular Ui Router_State_Ionic View

Angularjs UI路由器多视图单个控制器不工作

angularjs ionic-framework

Angularjs UI路由器多视图单个控制器不工作,angularjs,ionic-framework,angular-ui-router,state,ionic-view,Angularjs,Ionic Framework,Angular Ui Router,State,Ionic View,我想使用视图中定义的一个控制器，但$scope没有定义任何内容。有办法做到这一点吗？请分享一个简单的例子，以便理解我有这个index.html <body ng-app="ehc"> <h1>{{home}}+{{a}}+{{b}}</h1> <ion-side-menus enable-menu-with-back-views="false" delegate-handle="left">

我想使用视图中定义的一个控制器，但

$scope

没有定义任何内容。有办法做到这一点吗？请分享一个简单的例子，以便理解

我有这个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>


{{home}}+{{a}+{{b}
AAA
糖果棒
你好，世界冠军*{{home}*
**{{a}**
**{{b}**

这是我的模型定义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";
})

var-app=angular.module（“ehc”、[“ionic”]）
.config（函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider.state（'Home'{
url:“/”，
控制器：“HomeCtrl”，
//模板：“你好dal AngularJs”，
观点：{
“a”：{
templateUrl:'templates/a.html'
},
“b”：{
templateUrl:'templates/b.html'
}
}
});
}).controller（“HomeCtrl”[“$scope”，“$ionicSideMenuDelegate”，
“$routeParams”、“config”、“$q”、“$http”]，函数（$scope、$ionicSideMenuDelegate、$routeParams、config、$q、$http）{
$scope.toggleft=函数（）{
$ionicSideMenuDelegate.toggleLeft（）；
};
//加共体语言菜单
控制台日志（“aaaaaaaa”）；
$scope.home=“Pippo”；
$scope.a=“XAX”；
$scope.b=“XBX”；
})

console为空，并且是html模板中的作用域。如果您有解决方案，请使用非常简单的示例

我在这里读到过，我认为它是有效的

非常类似的问题：

这里的要点是：

控制器始终属于视图，而不属于状态

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

 $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
      }
    }
  });

如果我们想在多个视图中共享一些东西，我们需要不同于“同一控制器”的技术。见：

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

包括typescript，这里有一个详细的描述和示例，说明了所有视图/状态如何针对一些常见的

RootModel

我已经看到了，但它不起作用示例我使用：{{a}外部视图（）a或b结果是：{{a}}=内部视图（）中的空字符串a和b结果是：{{a}={{a}外部，尝试将{{a}转换为模板noSorry，我不理解您的评论。如果你能用你的问题创建plunker，我愿意提供帮助。但一般来说，如果希望主状态有一些外部视图模板，然后是一些内部视图，则应该使用绝对命名。可能会给你一些提示好的，解决了。我看过那篇文章。控制器定义中存在问题：。控制器（“名称”[“aaa”，函数（aaaa）{}]），方括号的闭合在我的代码中不正确。但是在如何使用$scope之外？很高兴看到您取得了进展。请记住-控制器属于视图而不是状态；）当在两个视图中都指定了HomeCtrl控制器时，是该控制器有两个实例，还是共享了同一个实例？