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

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

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]  };

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。