angular.js自定义指令

angular.js最为强大的地方在于可以通过自定义指令来扩展html元素，这种思路与JSP的taglib类似，但在实现细节上更为自由，并且自定义指令也可以提供表单元素交互、数据绑定、事件处理功能。

创建自定义指令的基本格式为：

angular.module('myApp',[]).directive('myDirective',function(){return {restrict :'EA',scope:true,template:``//ES6多行字符支持,模板文本字符串，也可使用templateUrlreplace:true,transclude:true,link:function(){//DOM operates.}}})

1.指令行为限制

A：用于限制属性，例如<div my-exp='something'></div>

E：用于限制元素，即可直接使用该指令作为html标签使用

C：用作html元素的class类。

2.指令作用域

最简单的做法是在创建自定义指令时将scope属性设置为 true从而共享父作用域，缺点是无法避免指令中修改父作用域的值。因此，通常的做法是为指令添加隔离作用域。在隔离作用域中，以下三个运算符的使用较为重要：

@：取DOM节点的属性值到隔离作用域中使用，

=：将$scope中的属性值与隔离作用域中的值进行双向绑定，

&：将$scope中的函数绑定到隔离作用域中（仅适用于函数）。

3.链接函数

自定义指令中可通过link函数修改DOM，通常被设置为一个postLink函数，实际上还可以设置一个preLink函数用于在元素链接之前执行。

以下示例提供了较为复杂的自定义指令，包含上述所有语法要点：

<!DOCTYPE HTML>
<html ng-app='myApp'><head><meta charset='utf-8'><title>Event key</title>   <style type="text/css">.expander {border: 1px solid black;width: 250px;}.expander>.title {background-color: black;color: white;padding: .1em .3em;cursor: pointer;}.expander>.body {padding: .1em .3em;}</style></head><body><div ng-controller='SomeController'><expander class='expander' title='title' click-fnc='clickFnc()'>{{text}}</expander></div></body><script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script><script>var app = angular.module('myApp',[]);app.controller('SomeController',function($scope){$scope.title = 'Click to expand';$scope.text = 'Some content inside this expander';$scope.clickFnc = function(){console.log("I'm clicked.");}}).directive('expander',function(){return {restrict:'EA',replace:true,transclude:true,scope: {title: '=title',clickFnc: '&clickFnc'},template:`<div><div class='title' ng-click='toggle();clickFnc()'>{{title}}</div><div class='body' ng-show='showMe' ng-transclude></div></div>`,link:{pre:function preLink(scope,element,attrs){console.log("Pre link");},post:function postLink(scope,element,attrs){console.log("Post link.");scope.showMe = false;scope.toggle = function toggle(){scope.showMe = !scope.showMe;}}}}});</script></body>
</html>

angular.js自定义指令相关推荐

Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
【前端技巧】JS自定义指令 —— 无限滚动(改写el-table-infinite-scroll)
@Author:Outman @Date:2023-03-08 JS自定义指令 -- 无限滚动(改写el-table-infinite-scroll) 自定义指令实现 // directives/in ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...
angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priorit ...
Angular JS(二) 指令部分
还是打算分开来写,因为这部分正好打算写一下Angular JS里面的常用指令,篇幅会比较多,就不放在一起了. 接上部分继续说一下Angular JS的骚操作23333 (四)常用指令使用这些指令可以 ...
angular创建自定义指令的四种方式
angular除了内置的部分指令,还可以通过.directive来自定义指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令:nsHeader,在调用时使用需要-来分 ...

angular.js自定义指令

angular.js自定义指令相关推荐

最新文章

热门文章