34

次の angular.ui Modalの例は、後で関数として作成される aのmodalInstance呼び出しを示しています。ModalIntanceCtrl

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

2 つの質問/問題があります。

  1. ドキュメントでは、別の方法でコントローラーを作成することをお勧めします (縮小の問題のため)。たとえば、次のようになります。

    myApp.controller('GreetingCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

しかし、このようにコントローラーを作成した場合、modalInstance にどのように挿入できますか?

  1. ここで呼び出すコントローラーは Modal Instance コントローラーではありませんが、私の globalloginCtrlです。これは問題ですか? どうにかして loginCtrl をサブクラス化するか、ModalInstanceCtrl から呼び出す必要がありますか? もしそうなら - どのように正確に？

これについてのガイダンスと明確化を喜んでいたします。ありがとう！

4

4 に答える 4

31

質問はあまり明確ではありませんが、モジュール API を使用してコントローラーを宣言すると、コントローラーをモーダル サービスに文字列として提供できます。

myApp.controller('ModalInstanceCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

controller: 'ModalInstanceCtrl',

loginCtrlモーダルサービスでそれを使用したい場合も同じことができます。

于 2013-10-21T06:36:20.687 に答える
12

このプランカーは、私のように例を見たい人のために作成しました。グローバル名前空間を汚染することなくモーダルを作成する方法を示しています。うまくいけば、それは役に立ちます。

以下のbummiのコメントに従ってコード例を含めるように編集

index.html

<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">    </script>
<script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"     rel="stylesheet">
  </head>
  <body>

<div ng-controller="appController">
    <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <span>Message:{{message}}</span>
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

<button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

app.js

angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
  function($rootScope) {
    this.data = {};
    this.data.message = 'This is a message from a service';
    this.data.items = ['item1', 'item2', 'item3'];
  }
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
  function($scope, $modalInstance, dataService) {
    $scope.data = dataService.data;
    $scope.message = dataService.data.message;
    $scope.items = dataService.data.items;

    $scope.selected = {
      item: $scope.items[0]
    };

    $scope.ok = function() {
      $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };

  }
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
  function($scope, $modal, $log, dataService) {

    $scope.data = dataService.data;

    $scope.showModal = function() {
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'myModal'
      });

      modalInstance.result.then(function(selectedItem) {
        $scope.selected = selectedItem;
      }, function() {
        $log.info('Modal dismissed at: ' + new Date());
      });

    };

  }
]);
于 2014-04-08T15:26:26.133 に答える
4

同様の問題があり、次のように、モジュールに追加せずにモーダル コントローラーを宣言しました。

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { ... }

他の変更は必要なく、この構文はミニフィケーションでも機能します。

于 2014-11-13T16:01:39.350 に答える
3

これを行う簡単な方法は、$inject を使用することです。

    // 次の依存関係をコントローラーに挿入します
    ModalInstanceCtrl.$inject = ['$scope', '$modalInstance', 'items'];

コントローラー メソッドを名前付き関数に変更します。

    function ModalInstanceCtrl($scope, $modalInstance, items) {
        $scope.items = アイテム;
        $scope.selected = {
            アイテム: $scope.items[0]
        };

        $scope.ok = 関数 () {
            $modalInstance.close($scope.selected.item);
        };

        $scope.cancel = 関数 () {
            $modalInstance.dismiss('キャンセル');
        };
    };

私はこのテーマについてブログ記事を書きました。これには、$inject を使用するディレクティブのテストを作成する方法が含まれています。

angular-2-0-part-2 への移行

于 2015-06-03T18:26:46.227 に答える