angular学习笔记(十九)-自定义指令修改dom
使用angular指令可以自己擴展html語法,還可以做很多自定義的事情.在后面會專門講解這一塊的知識,這一篇只是起到了解入門的作用.
與控制器,過濾器,服務,一樣,可以通過模塊實例的directive的方法來創建指令:
var someModule = angular.module('SomeModule',[]);
someModule.directive('directiveName',function(){
? ? ?return {
? ? ? ? ?link:?function(scope,elements,attrs,controller){
? ? ? ? ?}
? ? ?}
});
directive傳入兩個參數:
第一個參數是指令的名字;
第二個參數是一個工廠函數:
函數返回一個對象,對象的link方法的函數有四個參數:
scope:獲取外層scope的引用
elements:它所存在的DOM元素
attrs:傳遞給指令的一個屬性數組
controller:DOM元素上的控制器
?
下面來看個簡單的小例子,在html5中,元素有autofocus屬性,添加了這個屬性的元素,會自動獲取焦點.我們可以使用angular來寫一個這樣的指令:
我們讓第二個button在打開的時候就獲取焦點,所以按回車就相當于點擊了這個按鈕:
<!DOCTYPE html> <html ng-app="AutoFocus"> <head><title>16.1使用指令修改DOM</title><meta charset="utf-8"><script src="../angular.js"></script><script src="script.js"></script><style type="text/css">*{font-family:'MICROSOFT YAHEI';font-size:12px}</style> </head> <body> <div ng-controller="focus"><button ng-click="nofocus()">沒有焦點</button><br/><button myautofocus ng-click="hasfocus()">有焦點</button><br/><br/><span>{{text}}</span> </div> </body> </html> var autoFocus = angular.module('AutoFocus',[]); autoFocus.controller('focus',function($scope){$scope.text="沒有點擊任何按鈕";$scope.nofocus = function(){$scope.text="沒有點擊任何按鈕";};$scope.hasfocus = function(){$scope.text="點擊了有焦點按鈕";}; }); autoFocus.directive('myautofocus',function(){return {link: function(scope,elements,attrs,controller){elements[0].focus();}} });一.創建模塊AutoFocus
二.通過模塊的controller方法創建控制器focus
三.通過模塊的directive方法創建指令myautofocus
? ??myautofocus的工廠函數就是實現元素自動獲取焦點這一功能
?
效果截圖:
打開頁面時:
?
按下回車后:
?
?
? ??
轉載于:https://www.cnblogs.com/minghui007/p/7206144.html
總結
以上是生活随笔為你收集整理的angular学习笔记(十九)-自定义指令修改dom的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows IOCP模型
- 下一篇： LeetCode 605 种花问题