javascript - 在同一个 View 中使用 ionic 的多个 Controller

Question

我有一个 Controller 名称为 "Listctrl" 的 View 在此 View 中，我想要一个名为 "LocationCtrl" 的不同 Controller 。目前我这样做:

路由

 .state('list', {
        url: '/list',
        templateUrl: 'templates/list.html',
        controller: "ListCtrl",
        cache: false
      })

HTML(列表.html)

<ion-view ng-init="ini()" ng-controller="LocationCtrl">
  <ion-header-bar class="banner-top ext-box" align-title-h="left">
    <div class="int-box2"><h2 id="s_back1">STORIE</h2></div>
  </ion-header-bar>
<ion-content class="has-header has-footer no-bgColor start" overflow-scroll="false" has-bouncing="false">
<div class="container-list">

我应该如何正确解决这个问题？我需要两个 Controller 用于同一 View ，但位于不同的位置，因为我想在不同的 View 中重用 Controller 代码。

目前<ion-view ng-init="ini()" ng-controller="LocationCtrl">不运行LocationCtrl

非常感谢任何帮助!

Answer 1

一个 View 不可能有两个 Controller ，因为这没有意义。如果您有应该共享的功能，请使用 Controller 继承，但这只有在 LocationCtrl 将其方法添加到 $scope 时才可能实现:

var app = angular.module('angularjs', []);

app.controller('LocationCtrl', function($scope) {
  // I have functionality to share
});

app.controller('ListCtrl', function($scope, $controller) {
  $controller('LocationCtrl', {$scope: $scope}); // This adds properties to ListCtrl's scope
});

另一种方法是将 ng-controller="LocationCtrl" 放入包装 div:

<ion-view ng-init="ini()">
  <div ng-controller="LocationCtrl">
       <ion-header-bar class="banner-top ext-box" align-title-h="left">
          <div class="int-box2"><h2 id="s_back1">STORIE</h2></div>
       </ion-header-bar>

但这似乎不是一个好的选择。更好的方法是创建一个具有 LocationCtrl 上定义的功能的组件/指令，并在 View 中的某个位置使用它:

<ion-view ng-init="ini()">
  <component-with-location-ctrl-functionality></component-with-location-ctrl-functionality>