AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框_angularjsbootstrap modal

scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScope

controller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入

resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()

backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭

keyboard：当按下Esc时，模态对话框是否关闭，默认为ture

windowClass：指定一个class并被添加到模态窗口中

open方法返回一个模态实例，该实例有如下属性

close(result)：关闭模态窗口并传递一个结果

dismiss(reason)：撤销模态方法并传递一个原因

result：一个契约，当模态窗口被关闭或撤销时传递

opened：一个契约，当模态窗口打开并且加载完内容时传递的变量

另外，$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器

实战：

在app.js中需要加入依赖ui.bootstrap，需要在index.html中引入ui-bootstrap-tpls-0.7.0.js。

以下为html代码:

<div ng-controller="ModalDemoCtrl">

<span style="white-space:pre">	</span><script type="text/ng-template" id="myModalContent.html">

<span style="white-space:pre">	</span><div class="modal-header">

<span style="white-space:pre">		</span><h3 class="modal-title">I'm a modal!</h3>

<span style="white-space:pre">	</span></div>

<span style="white-space:pre">	</span><div class="modal-body">

<span style="white-space:pre">		</span><ul>

<span style="white-space:pre">		</span>     <li ng-repeat="item in items">

<span style="white-space:pre">	</span>                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 

                     </li>

                </ul>

              Selected: <b>{{ selected.item }}</b>

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

        </div>

    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>

    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>

    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>

    <div ng-show="selected">Selection from a modal: {{ selected }}</div></div>
     angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

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

       $scope.animationsEnabled = true;

       $scope.open = function (size) {

         var modalInstance = $modal.open({

               animation: $scope.animationsEnabled,

               templateUrl: 'myModalContent.html',

               controller: 'ModalInstanceCtrl',

               size: size,

               resolve: {

               items: function () {

                     return $scope.items;

                   } 

                 }

              });

以下为JS代码:

modalInstance.result.then(function (selectedItem) {

      $scope.selected = selectedItem;    },

      function () {

           $log.info('Modal dismissed at: ' + new Date());    });  };

     $scope.toggleAnimation = function () {

          $scope.animationsEnabled = !$scope.animationsEnabled;  }; });

     // Please note that $modalInstance represents a modal window (instance) dependency.

     // It is not the same as the $modal service used above.

     angular.module('ui.bootstrap.demo').controller('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');

     };});

出现如下错误:

Modal dismissed at: Mon Sep 14 2015 18:53:33 GMT+0800 (中国标准时间)

也就是说bootstrap.min.css、ui-bootstrap-tpls-0.13.4.js、angular.js要保持一定的版本关系。

在将ui-bootstrap-tpls的版本改为0.13.4之后，又出现如下错误提示:

Error: [$injector:unpr]Unknownprovider:$templateRequestProvider <- $templateRequest<-$modal

如果是因为版本冲突的原因，自己就尝试着更换ui-bootstrap-tpls的版本，结果当试到ui-bootstrap-tpls-0.9.0.js时，发现问题解决了。截图如下:

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS

• JavaScript

• 前端框架

• 前端性能优化

• 前端监控

• 模块化+项目构建

• 代码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容