圖片上傳功能的實現
方法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="中國" οnfοcus=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" />頁面在一打開時顯示代碼，出現閃爍的情況
在做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%',
});
});