angular.js で ui.bootstrap のモーダル コンポーネントをエレガントに使用する方法

angularjs の ui.bootstrap のモーダル コンポーネントは、ページ コントローラーとモーダル ボックス コントローラーの間の通信を簡単に実装できます。特に、ポップアップ モーダル ボックスには、ユーザーが入力する必要がある比較的複雑なフォーム情報が含まれています。本題に移りましょう:

グローバルモーダルボックスインスタンスのコントローラーを登録します

angular.module('myApp.Controllers', [
        'ui.bootstrap'
])
.controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) {
      var $ctrl = this;
      $scope.modalDatas = modalDatas; //双向绑定，方便在确认中回传可能修改的字段
     
      // $ctrl.insta
      $ctrl.ok = function (val) {
        $scope.modalDatas.result = val;
        $uibModalInstance.close(
          $scope.modalDatas  //在模态框View中修改的值传递回去，view中可以直接添加属性
        );
      };
      
      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    })

新しいテンプレートファイル src/templates/modalViews/confirm.html

<p class="modal-header">
    <h3 class="modal-title">标题</h3>
</p>

<p class="modal-body">
    <p class="content">
      <label class="label">确认信息：</label>
      <input type="text"  ng-model="modalDatas.msg">
    </p>
    <p class="content">
      <label class="label">备注信息：</label>
      <input type="text"  ng-model="modalDatas.content">
    </p>
    
</p>

<p class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">确定</button>
    <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
</p>

ページトリガーコード:

<button type=&#39;button&#39; class=&#39;btn btn-primary&#39; ng-click="openModal(&#39;md&#39;, &#39;confirm&#39;)">打开'confirm' modal</button>

In管理ページのコントローラー 出発コード openModal関数を登録します

ui.bootstrapが提供するサービス$uibModalを利用してモーダルボックスを作成します モーダルボックスのビューとコントローラーを簡単に設定するだけです。 。 $uibModal は、構成用の唯一のメソッド open(options) を提供します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト$uibModal来创建模态框，只需要简单的配置模态框视图和控制器。$uibModal提供唯一的方法open(options)配置。（想看更多就到PHP中文网AngularJS开发手册中学习）

options参数：
animation (Type: boolean, Default: true) 模态框打开/关闭动画控制
appendTo (Type: angular.element, Default: body) 指定将模态框代码插入位置，默认插入到body
backdrop (Type: boolean|string, Default: true) 遮罩层显示控制
backdropClass (Type: string) 给遮罩层添加额外class
bindToController (Type: boolean, Default: false) - 当使用 controllerAs（比如设置为$ctrl） 并且此属性设置为true时,可以把$scope绑定到controller.主意$scope是能够管理模态框的scope,也就是说，如果模态框默认插入到body，那么会将管理body标签的控制器绑定到$ctrl,所以最好结合appendTo一起使用。
component (Type: string, Example: myComponent) 将模态框当做组件方式使用
controller (Type: function|string|array, Example: MyModalController) 指定模态框控制器
controllerAs (Type: string, Example: ctrl) 控制器别名
resolve (Type: Object) - 给模态框传递数据;
templateUrl (Type: string) 指定模态框视图层模板
sizeAngularJS 開発マニュアル

にアクセスして学習してください)

optionsパラメータ:

animation (タイプ: boolean、デフォルト : true) モーダル ボックスの開閉アニメーション コントロール
appendTo (タイプ: angular.element、デフォルト: body) は、モーダル ボックスのコードを挿入する位置を指定します。デフォルトで本文に挿入されます
backdrop (タイプ: boolean|string、デフォルト: true) マスクレイヤー表示コントロール
backdropClass (タイプ: string)追加のクラスをマスク レイヤーに追加しますbindToController (タイプ: boolean、デフォルト: false) - controllerAs (たとえば、$ctrl に設定) を使用する場合、これプロパティが true に設定されている場合、$scope Bind をコントローラーに設定できます。これは、$scope がモーダル ボックスを管理できるスコープであるということです。つまり、モーダル ボックスがデフォルトで本文に挿入されている場合、 bodyタグを管理するcontrollerは$ctrlにバインドされるので、appendToと組み合わせるのがベストです。
コンポーネント (タイプ: string、例: myComponent) モーダルボックスをコンポーネントとして使用します
controller (タイプ: function|string|array、例) : MyModalController) モーダル ボックス コントローラーを指定します
controllerAs (型: string、例: ctrl) コントローラー エイリアス
resolve (型: Object ) - データを渡しますモーダル ボックスへ;
templateUrl (タイプ: 文字列) はモーダル ボックス ビュー レイヤー テンプレートを指定します
size (タイプ: 文字列、例: lg) はモーダル フレーム サイズを指定します🎜

<strong>还有很多属性，可以到官网查询，比如控制多层模态框等等。</strong>

$scope.openModel = function (size, type) {
      //type即view文件名，在同一个页面有多个不同业务的模态框的情况下很方便
      var tplUrl = './src/templates/modalViews/' + type + '.html';
      $scope.modalDatas = {
          msg: 'Hello World!'
      };

      var modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: tplUrl,
        controller: 'appModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        resolve: {
          modalDatas: function () {
            return $scope.modalDatas;
          }
        }
      });
      modalInstance.result.then(function (datas) {
        // 点击确认按钮执行的代码
        //可以从datas中获取msg和content字段
        //进一步操作：发起http请求等       
      }, function () {
        // 点击取消按钮执行的代码
        console.info('Modal dismissed at: ' + new Date());
      });
    };

🎜この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト🎜AngularJS ユーザー マニュアル🎜 にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。 🎜

以上がangular.js で ui.bootstrap のモーダル コンポーネントをエレガントに使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。