Question

我有一个简单的项目列表，并希望在标题中有一个按钮，用于显示和隐藏每个列表项旁边的删除按钮。我的标题和内容由不同的视图组成。

经过多次阅读后，似乎控制器附加到视图而不是状态，因此我需要为每个视图配备一个单独的控制器（一个控制器用于标头，一个控制器用于内容）。由于我无法在控制器之间共享变量，在一个视图中使用按钮（header.html）在不同视图（content.html）的列表中显示/隐藏按钮的最佳方法是什么？

我的HTML如下：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
    will inject platform-specific code from the /merges folder -->
    <script src="js/platformOverrides.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="Scripts/angular-resource.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

  <body ng-app="starter">
    <ion-view view-title="Playlists">
      <div ui-view="header"></div>
      <div ui-view="content"></div>
    </ion-view>
</body>
</html>

了header.html

<ion-header-bar class="bar-positive">
    <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
                ng-click="data.showDelete = !data.showDelete"></button>
    </div>
    <h1 class="title">my test app</h1>
</ion-header-bar>

content.html

<ion-content class="has-header has-footer" overflow-scroll="true">
    <ion-list show-delete="data.showDelete">
        <ion-item ng-repeat="movie in movies" href="#/home/{{movie.id}}">
            {{movie.title}}
            <ion-delete-button class="ion-minus-circled"
                               ng-click="onItemDelete(movie)">
            </ion-delete-button>
            <ion-option-button class="button-assertive" ui-sref="editMovie({id:movie.id})">Edit</ion-option-button>
        </ion-item>
    </ion-list>
</ion-content>

我的js低于.....

app.js

angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
      if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function ($stateProvider, $urlRouterProvider) {

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('home', {
        url: '/',
        views: {
            'header': {
                templateUrl: 'templates/header.html',
                controller: 'headerCtrl'
            },
            'content': {
                templateUrl: 'templates/content.html',
                controller: 'contentCtrl'
            },
            'footer': {
                templateUrl: 'templates/footer.html'
            }
        }
    });

});

controllers.js

angular.module('starter.controllers', [])

.controller('headerCtrl', function ($scope) {

    $scope.showDelete = function () {
        $scope.data.showDelete = !$scope.data.showDelete;
    };

})

.controller('contentCtrl', function ($scope, $state, $stateParams, Movie) {

    // populate list withg all items from database
    $scope.movies = Movie.query();

    // handle delete button click
    $scope.onItemDelete = function (movie) {
        $scope.movies.splice($scope.movies.indexOf(movie), 1);
        movie.$delete();
        $scope.data.showDelete = false;
    };

});

Answer 1

您实际上可以使用Angular称为“服务”的方式在控制器之间共享变量。

AngularJS: How can I pass variables between controllers?

列表视图中的离子删除按钮切换列表视图中的删除按钮

1 个答案: