Home > Web Front-end > JS Tutorial > body text

Sample code sharing about angularJS modal box $modal

黄舟
Release: 2017-05-27 10:29:32
Original
1594 people have browsed it

This article mainly introduces the angularJS modal box $modal example code. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look

1.Introduce the $modal module

For example:

angular.
module
('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);
Copy after login

2.Execute Adjust the modal boxFunction

$scope.editModule = function(type, size, id) { 
  $scope.id = id; 
  var modalInstance = $modal.open({ 
    templateUrl: 'tpl/weichat_modulebaseinfo.html', //template:'html元素模板', 
    controller: 'EditModuleCtrl', // 初始化模态范围 
    size: size, //大小配置 
    scope: '一个作用域为模态的内容使用($modal会创建一个当前作用域的子作用域,scope可有可无)默认为$rootScope', 
    resolve: { 
      items: function() { 
        return $scope.id; //向模态框控制器中传值 
      } 
    } 
    background: '', //控制背景,true(有) or false(无),static背景存在,但是点击模态窗口之外,模态窗不关闭 
    keyboard: '', //按下Esc时,模态对话框是否关闭,默认为ture 
    windowClass: '' //指定一个class并被添加到模态窗口中 
 
  }); 
 
  modalInstance.result.then(function(selectedItem) { //模态框关闭后返回函数,selectedItem为返回值 
 
  }) 
}
Copy after login

3. Create a modal box controller

app.controller('EditModuleCtrl', ['$scope', '$modalInstance', 'BookService', '$stateParams', 'items', 
function($scope, $modalInstance, BookService, $stateParams, items) { //依赖于modalInstance 
    //items为传过来的值 
    $scope.modalBack = function() { 
      //执行模态框内部操作 
    } 
 
    $scope.ok = function() { 
      $modalInstance.close($scope.textid); //关闭并返回当前选项 
    }; 
    $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); // 退出不执行任何操作 
    } 
  }])
Copy after login

The above is the detailed content of Sample code sharing about angularJS modal box $modal. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template