AngularJS創(chuàng)建一個上傳照片的指令實例代碼
angularJS在近幾年發(fā)展火熱，也無疑是目前市面上來說比較牛逼且成熟的框架，在單頁面前端應用當中應該可以說是王者，雙向綁定省去了大量的前端代碼，控制器在其作用于方面的控制也是相當膩害，今天我們要說的是另外一個比較牛逼的功能，就是angularJS的指令directive，之前沒聽說過angularJS指令的朋友請自行度娘，隨便搜一條文章都比我說的詳細，這次用一個我自己寫的圖片上傳的指令來做為案例，詳細說明一下實際操作過程中的指令。
之前我們前端的附件上傳用的是jqueryFileUpload，每次使用都要在頁面把樣式畫好，然后再控制器中初始化upload組件，上傳成功或失敗時候還要做相應的處理，這樣每次寫一個附件上傳都要寫代碼去處理，這樣很重復勞動，所以就想利用angularJS的指令把重復勞動的環(huán)節(jié)給去掉，具體代碼如下：
.directive('imageUpload',['Constants',function(Constants){
return {
restrict: 'E',
scope: {
scopeModel:'=',
title:'@'
},
template : '<fieldset>'
+'<legend>{{title}}<span class="fileinput-button"><span>重新上傳</span>'
+'<input type="file" name="file"></span></legend>'
+ '<span class="profile-picture">'
+ '<img class="img-responsive" alt="{{title}}" ng-src="{{loadImg(scopeModel)}}" style="display: block;"/>'
+ '</fieldset>',
link : function(scope, element, attrs) {
$(element).fileupload({
url: 'file/upload',
dataType: 'json',
done: function(e, data) {
var res = data.result;
if(res.success){
scope.scopeModel=res.data.fileKey;
scope.$apply();
}
}
});
scope.loadImg=function(key){
if(undefined==scope.scopeModel || null==scope.scopeModel || scope.scopeModel===''){
return $.ctx+'/images/noImage.jpg';
}
if(scope.scopeModel.indexOf('http://')>-1){
return scope.scopeModel;
}
return $.ctx+'/file/getFile?fileKey='+scope.scopeModel;
}
}
};
}]);
指令完成之后在前端頁面上只需要寫一行代碼就可以完成照片的加載（如果是修改頁面需要加載出原照片）和上傳功能，其中scopeModel是用來雙向綁定的，在調用的時候把controller中的model傳遞進去之后可以實現(xiàn)指令和controller之間的雙向綁定，代碼中的template為element模板，可以根據具體的樣式自己更換（我用的是bootstrap），使用如下：
<image-upload scope-model="imagePath" title="照片上傳"></image-upload>
總結
以上所述是小編給大家介紹的AngularJS創(chuàng)建一個上傳照片的指令實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了Angular模板表單校驗方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
一直比較喜歡angular，正巧最近有個項目用到了，所以想和大家來分享下，下面這篇文章主要給大家介紹了關于Angular項目從新建、打包到nginx部署的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-12-12
AngularJS控制器controller正確的通信的方法
AngularJS中的controller是個函數(shù)，用來向視圖的作用域（$scope）添加額外的功能，我們用它來給作用域對象設置初始狀態(tài)，并添加自定義行為2016-01-01
ng-container 是 Angular 2+ 中可用的一個元素,可以作為結構指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-02-02
AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法
這篇文章主要介紹了AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法,對比不同瀏覽器錯誤提示分析了加載失敗的原因及通過http訪問的解決方法,需要的朋友可以參考下2017-01-01
angular4模塊中給標簽添加背景圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標簽添加背景圖的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
angular 實時監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實時監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了AngularJS 2.0入門權威指南的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
本文主要介紹AngularJS 表格,這里給大家整理了相關知識,并附代碼實例,有需要的小伙伴可以參考下2016-07-07
本篇文章主要介紹了在 Angular 中實現(xiàn)搜索關鍵字高亮示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03