Angle.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>

#🎜 🎜#관리페이지에서 시작 코드

의 컨트롤러에 openModal 함수를 등록합니다. ui.bootstrap에서 제공하는 $uibModal 서비스를 이용하세요 모달 상자를 생성하려면 모달 상자 보기와 컨트롤러만 구성하면 됩니다. $uibModal은 구성을 위한 유일한 open(options) 메소드를 제공합니다. (자세한 내용을 알아보려면 PHP 중국어 웹사이트

AngularJS 개발 매뉴얼

을 방문하세요.) $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) 指定模态框视图层模板
size

옵션매개변수:
animation(유형: 부울, 기본값: true) 모달 상자 열기/닫기 애니메이션 컨트롤
appendTo(유형: angle.element , 기본값: body)는 모달 상자 코드가 삽입되는 위치를 지정합니다. 기본적으로 body
backdrop에 삽입됩니다. (유형: boolean|string, 기본값: true) 마스크 레이어 표시 control
backgroundClass (유형: 문자열) 추가 클래스 추가
bindToController (유형: 부울, 기본값: false) - controllerAs (예를 들어 $ctrl로 설정) 이 속성을 true로 설정하면 $scope를 컨트롤러에 바인딩할 수 있습니다. 즉, $scope는 모달 상자를 관리할 수 있는 범위입니다. , 기본적으로 본문에 모달박스가 삽입되어 있으면 본문 태그를 관리하는 컨트롤러를 $ctrl에 바인딩하므로 <code>appendTo와 함께 사용하는 것이 가장 좋습니다.
구성요소(유형: 문자열, 예: myComponent) 모달 상자를 구성요소로 사용
컨트롤러(유형: function|string|array, 예 : MyModalController) 모달 박스 컨트롤러 지정
controllerAs (유형: 문자열, 예: ctrl) 컨트롤러 별칭
resolve (유형: Object ) - 데이터 전달 모달 상자에
templateUrl(유형: 문자열)은 모달 상자 보기 레이어 템플릿을 지정합니다.
크기(유형: 문자열, 예: 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 중국어 웹사이트

AngularJS 사용자 매뉴얼#🎜🎜#으로 이동하세요). 질문이 있으시면 메시지를 남겨주세요. 아래에서 질문을 하세요. #🎜🎜#

위 내용은 Angle.js에서 ui.bootstrap의 모달 구성 요소를 우아하게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!