AngularJS 学习记录

来源：互联网发布：真实的王菲知乎编辑：程序博客网时间：2024/05/16 09:18

图片上传功能的实现

方法1 ：（未经测试）
链接地址：
http://www.open-open.com/lib/view/open1437920172156.html

提供一个插件的链接：
http://www.tuicool.com/articles/vYbAJnI
http://www.oschina.net/p/angular-file-upload
方法2：（公司开发使用）

让表单、文本框只读，不可编辑

有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，”中国”两个字不可以修改。实现的方式归纳一下，有如下几种。
方法1: onfocus=this.blur()

<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly

<input type="text" name="input1" value="中国" readonly><input type="text" name="input1" value="中国" readonly="true">

方法3: disabled

<input type="text" name="input1" value="中国" disabled>

AngularJS 与 Bootstrap JS组件结合

链接：
http://www.open-open.com/news/view/fba7d5
链接：
http://blog.csdn.net/jthink_/article/details/10083879

AngularJS中的隐藏和显示

链接：http://www.xuehuile.com/blog/5059429701d341569980158438632097.html
对于菜单、上下文敏感的工具以及很多其他情况来说，显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样，Angular是通过修改数据模型的方式来驱动UI刷新，然后通过指令把变更反应到UI上。
ng-show和ng-hide这两条指令的功能是等价的，但是运行效果正好相反，我们都可以根据所传递的表达式来显示或隐藏元素。也就是说，ng-show在表达式为true时将会显示元素，为false时将会隐藏元素；而ng-hide则恰好相反。
这两条指令的工作原理是：根据实际情况把元素的样式设置为display:block来显示元素；设置为display:none来隐藏元素。

<html ng-app='myApp'><head>    <title>ng-show实例</title></head><body ng-controller='ShowController'>    <button ng-click="toggleMenu()">Toggle Menu</button>    <ul ng-show='menuState.show'>        <li>Stun</li>        <li>Disintegrate</li>        <li>Erase from history</li>    </ul>    <script src="lib/angular/angular.js"></script>    <script>        var myApp=angular.module('myApp',[])        myApp.controller('ShowController', function($scope) {            $scope.menuState = {                show: false            }            $scope.toggleMenu = function() {                $scope.menuState.show = !$scope.menuState.show;            }        });    </script></body></html>

表单验证

转载链接：表单验证
常用的表单验证指令
1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />

最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”：

<input type="text" ng-minlength="5" />

最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength=”{number}”：

<input type="text" ng-maxlength="20" />

模式匹配

使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

数字

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

URL
验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

页面在一打开时显示代码，出现闪烁的情况

ngCloak 实现 Angular 初始化闪烁最佳实践

在做angular的SPA开发时，我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于angular会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。

在angular中为我们提供了ng-cloak来实现纺织闪烁的方案，我们只需要在需要的地方加上ng-cloak。同时对于bing文字({{ express }} )我们也可以改为ng-bind来实现避免。

 <div id="template1" ng-cloak>hello</div> <div id="template2" ng-cloak class="ng-cloak"> {{'hello IE7}}</div> <div id="template2" ng-bing="'hello IE7'"></div>

angular讲ng-cloak实现为一个directive，并会在初始化的时候在DOM的heade增加一行css代码，如下：

<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}</style>

从上面我们可以看见angular将带有ng-clock的的元素设置为display:none，隐藏掉，在等到angular解析到带有ng-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防止节点的闪烁。

var ngCloakDirective = ngDirective({      compile: function(element, attr) {        attr.$set('ngCloak', undefined);        element.removeClass('ng-cloak');      }});

在angular.js的最后一段代码中能看见前面所说的增加css的代码：

!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}</style>');

好像闪烁的问题好像已经能够被我解决了，恩是否是这样的，理论也改如此，但是现实是残酷的，我们的感性认识经常会被现实一记重重的耳光，我们才能很更深入全面的思考，如果浏览器的速度比angular在head中加入css的速度还快呢？我在给公司的一个项目组解决这个闪烁的问题的时候就遇见了这个问题。怎么办呢？那我们只能使出我们必杀技，自己把css加入我们的css文件引入heade，启动加载，ok这样就可以完美解决了。(如果你也遇见了加了ng-cloak还不起作用的话，那么试试直接引入css文件吧)

如何实现在render完成之后，执行Js脚本

原文链接：http://www.itnose.net/detail/6100484.html
当我们使用Jquery结合AngulraJs使用的时候，希望在render完table后，执行一段js脚本，把JqTable应用到该table上。在实际开发中，会经常碰到这样的需求，希望能够捕获到AngularJs渲染完成页面的事件。要达到这个目的，我们需要为当前的app自定义directive:

app.directive('onFinishRenderFilters', function ($timeout) {    return {        restrict: 'A',        link: function(scope, element, attr) {            if (scope.$last === true) {                $timeout(function() {                    scope.$emit('ngRepeatFinished');                });            }        }    };});

然后，在我们需要监控的地方，加上该directive:

<tr ng-repeat="user in users" on-finish-render-filters>      <td>{{user.Id}}</td>      <td>{{user.Name}}</td>      <td>{{user.Salary}}</td></tr>

最后，补充上我们需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {          //下面是在table render完成后执行的js          var table = $("#leaderBoard").dataTable({              bJQueryUI: true,              "sScrollX": '100%',          });});

0 0