angularjs - UI-Router 多 View 单个 Controller 不起作用-6ren

angularjs - UI-Router 多 View 单个 Controller 不起作用

转载作者：行者123 更新时间：2023-12-04 17:33:36

25

4

我想使用在 View 中定义的一个 Controller ，但 $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>

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

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

我读过这里，我认为它有效 Rakrap Jaknap answered on 2015-04-17 08:01

最佳答案

非常相似的问题:Why controller does not work in UI-router of angularjs?

这里的重点是:

Controller always belongs to View, never to state.

换句话说，要使用相同类型的 Controller (但每个 View 有两个实例)，我们必须做这样的声明:

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

如果我们想在多个 View 之间共享一些东西，我们需要与“相同 Controller ”不同的技术。看:

How do I share $scope data between states in angularjs ui-router?

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

scope and controller instantiation with ui router

包括 typescript ，有详细的描述和示例，所有 View /状态如何针对一些常见的 RootModel
Angular Digest cycle being ran but ng-bind value not updating

关于angularjs - UI-Router 多 View 单个 Controller 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33134124/

25

4

0

文章推荐： amazon-web-services - AWS S3 在 getSignedUrl 过期后优雅地处理 403

文章推荐： r - 在 data.table 的 j 参数中使用 "list"

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

angularjs - UI-Router 多 View 单个 Controller 不起作用