Angular.JS通過指令操作DOM的方法
在指令而非在控制器中操作DOM
相信大家在頁面處理中,難免會(huì)遇到操作DOM的情況,在AngularJS中,對(duì)DOM的操作是在指令而非控制器中完成的。
AngularJS強(qiáng)調(diào)隔離的思想:把復(fù)雜的邏輯和操作放在指令或服務(wù)中,控制器作為視圖和$scope之間的橋梁,僅僅用來存儲(chǔ)數(shù)據(jù)模型。
jqLite
為了便于DOM操作,AngularJS內(nèi)部封裝了angular.element
,如果現(xiàn)有項(xiàng)目中已經(jīng)引入的jQuery,angular.element
相當(dāng)于jQuery函數(shù)的別名,否則,angular.element
代表AngularJS對(duì)jQuery封裝的一個(gè)子集,稱為”jQuery lite”或者jqLite。jqLite不具備jQuery全部方法,詳見AngularJS官方文檔 angular.element。
link-function
link-function可以注冊(cè)DOM監(jiān)聽器,同時(shí)更新DOM,更多l(xiāng)ink-function介紹參考這篇文章AngularJS Custom-Directives link-function guide
指令代碼
一個(gè)引入jQuery操作DOM的指令如下:
webApp.directive("detailTopStick", ["$timeout", "$window", function ($timeout, $window) { return { restrict: "A", link: function (scope) { $timeout(function () { var navbar = $(".navbar-nav"); var navbarOffsetTop = navbar.offset().top; var headerInfo = $(".header-info"); var headerInfoMarginBottom = parseInt(headerInfo.css("margin-bottom")); var navbarHeight = parseInt(navbar.css("height")); angular.element($window).bind("resize", function () { // 窗口綁定resize事件 navbar.css("width", headerInfo.width()); navbarOffsetTop = navbar.offset().top; scope.$apply(); }); angular.element($window).bind("scroll", function () { if ($window.scrollY > navbarOffsetTop) { navbar.css("width", headerInfo.width()); navbar.addClass("detail-navbar-fix"); headerInfo.css("margin-bottom", headerInfoMarginBottom + navbarHeight); } else { navbar.removeClass("detail-navbar-fix"); headerInfo.css("margin-bottom", headerInfoMarginBottom); } scope.$apply(); }); navbar.on("click", function () { if ($window.scrollY > navbarOffsetTop) { $window.scrollTo(0, navbarOffsetTop); } }); }); } }; }]);
如果未引入jquery,可以這樣獲取元素:angular.element(document.querySelector(“.class-name”))
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Angularjs自定義指令實(shí)現(xiàn)分頁插件(DEMO)
由于最近的一個(gè)項(xiàng)目使用的是angularjs1.0的版本,涉及到分頁查詢數(shù)據(jù)的功能,后來自己就用自定義指令實(shí)現(xiàn)了該功能,下面小編把實(shí)例demo分享到腳本之家平臺(tái),需要的朋友參考下2017-09-09angularjs實(shí)現(xiàn)與服務(wù)器交互分享
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。2014-06-06Angular2中監(jiān)聽數(shù)據(jù)更新的方法
今天小編就為大家分享一篇Angular2中監(jiān)聽數(shù)據(jù)更新的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08AngularJS教程之簡(jiǎn)單應(yīng)用程序示例
本文主要介紹AngularJS簡(jiǎn)單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序,有需要的小伙伴可以參考下2016-08-08基于angularjs實(shí)現(xiàn)圖片放大鏡效果
這篇文章給大家分享了angularjs實(shí)現(xiàn)購(gòu)物放大鏡效果的源碼實(shí)例,代碼介紹的很詳細(xì),有需要的可以參考借鑒,下面來一起看看。2016-08-08AngularJS 將再發(fā)布一個(gè)重要版本 然后進(jìn)入長(zhǎng)期支持階段
目前團(tuán)隊(duì)正在開發(fā) AngularJS 1.7.0,而 1.7 的開發(fā)周期將一直持續(xù)到 2018 年 6 月 30 日2018-01-01