在 Angularjs 应用程序中使用 AngularUI Bootstrap 组件-JavaScript中文网-JavaScript教程资源分享门户

AngularUI Bootstrap 是一个开源的 AngularJS 组件库，为开发者提供了丰富的 UI 组件，让我们轻松地创建美观且功能强大的应用程序。本文将介绍如何在 AngularJS 应用程序中使用 AngularUI Bootstrap 组件，并提供详细的示例代码和指导意义，帮助读者更好地理解和掌握相关技术。

安装和引入 AngularUI Bootstrap

首先，需要安装 AngularUI Bootstrap 库和相关的依赖。可以通过 npm 安装，也可以通过直接引入 CDN。

// javascriptcn.com 代码示例
<!-- 引入 CSS -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.min.css" />

<!-- 引入 JS -->
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js"></script>

引入完毕后，在 AngularJS 应用程序的主模块中注入 ui.bootstrap 模块即可开始使用 AngularUI Bootstrap 组件：

angular.module('myApp', ['ui.bootstrap']);

常用组件示例

警告框

<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<button class="btn btn-primary" ng-click="addAlert()">添加警告框</button>

// javascriptcn.com 代码示例
angular.module('myApp').controller('AlertCtrl', function ($scope) {
    $scope.alerts = [];

    $scope.addAlert = function () {
        var level = ['warning', 'danger', 'info'][Math.floor(Math.random() * 3)];
        $scope.alerts.push({ msg: '这是一个 ' + level + ' 警告框！', type: level });
    };

    $scope.closeAlert = function (index) {
        $scope.alerts.splice(index, 1);
    };
});

模态框

// javascriptcn.com 代码示例
<button class="btn btn-primary" ng-click="openModal()">打开模态框</button>

<!-- 模态框 -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">模态框标题</h3>
    </div>
    <div class="modal-body">
        <p>模态框内容</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">确定</button>
        <button class="btn btn-default" ng-click="cancel()">取消</button>
    </div>
</script>

// javascriptcn.com 代码示例
angular.module('myApp').controller('ModalCtrl', function ($scope, $uibModal) {
    $scope.openModal = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
        });

        modalInstance.result.then(function () {
            console.log('模态框已确认');
        }, function () {
            console.log('模态框已取消');
        });
    };
});

angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
    $scope.ok = function () {
        $uibModalInstance.close();
    };

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

日期选择器

<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="datepickerOpen" datepicker-options="dateOptions" close-text="关闭" alt-input-formats="altInputFormats" />
<button class="btn btn-primary" ng-click="toggleDatepicker()"><i class="glyphicon glyphicon-calendar"></i></button>

// javascriptcn.com 代码示例
angular.module('myApp').controller('DatepickerCtrl', function ($scope) {
    $scope.format = 'yyyy/MM/dd';
    $scope.date = new Date();
    $scope.datepickerOpen = false;
    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1,
    };
    $scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.toggleDatepicker = function () {
        $scope.datepickerOpen = !$scope.datepickerOpen;
    };
});

指令和服务

AngularUI Bootstrap 还提供了许多强大的指令和服务，方便我们更好地定制和扩展组件。这里列举一些常用的指令和服务：

指令

uib-dropdown：下拉菜单指令。
uib-accordion：手风琴指令。
uib-carousel：轮播指令。
uib-tooltip：工具提示指令。
uib-popover：弹出框指令。

服务

$uibModal：模态框服务。
$uibPosition：定位服务，用于计算组件的位置。
$uibModalStack：模态框栈服务，管理所有当前打开的模态框。

总结

AngularUI Bootstrap 是一个功能强大且易用的 AngularJS 组件库，为开发者提供了丰富的组件和指令，能够大大提升我们的开发效率和用户体验。通过本文的介绍和示例，相信读者已经初步掌握了 AngularUI Bootstrap 的使用方法和技巧，能够在实际开发中运用自如。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65299e937d4982a6ebc17a81