AngularJS自定义指令详解及示例代码

自定义指令中使用AngularJS扩展超文本标记语言的功能。自定义指令使用的"指令"的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素，并做好使用自定义指令编译()方法一次活动再处理使用基于指令的范围自定义指令链接()方法的元素AngularJS。提供支持，以下列元素的类型来创建自定义指令。

元素指令-指令遇到时激活一个匹配的元素。

属性- -指令遇到时激活一个匹配的属性。

CSS - -指令遇到时激活匹配半铸钢钢性铸铁(铸造半钢)样式。

评论- -指令遇到时激活匹配的注释。

了解自定义指令

定义自定义的超文本标记语言标签。

学生姓名=' Mahesh '/学生br/学生姓名=' Piyush '/学生

定义自定义指令来处理上面的自定义超文本标记语言标签。

var主app=angular。模块(' main app '，[])；//创建一个指令，第一个参数是要附加的超文本标记语言元素。//我们正在附加学生超文本标记语言标记。//在htmlmainApp.directive('student '，function(){//定义指令对象var指令={})中遇到任何学生元素时，将立即激活此指令；//restrict=E，表示指令是元素指令，restrict=' E//模板用其文本替换完整的元素指令。模板=' student : { { student。姓名} }，第：卷{ {学生。roll no } } '；//范围用于根据标准区分每个学生元素指令。scope={ student : '=name ' }//在应用程序初始化期间调用编译.加载超文本标记语言页面时，AngularJS会调用它一次指令。compile=function(元素，属性){ element。CSS('边框'，' 1px实心# cccccccc ')；//链接功能与每个有作用域的元素链接，得到元素特定的数据var link function=function($ scope，element，attributes){ element。html(' student : ' $ scope。学生。名称'，卷号： ' $作用域。学生。卷号' br/')；element.css('background-color '，' # ff 00 ff ')；}返回链接功能}返回指令；});定义控制器以更新范围为指令。在这里，我们使用名字属性值作为子的作用域。

mainapp。控制器('学生控制器'，函数($scope) { $scope .mahesh={ }；$scope .Mahesh . name=' Mahesh Parashar $ scope .马赫什。辊号=1；$scope .piyus={ }；$scope .Piyush . name=' Piyush Parashar $ scope .皮尤斯。卷号=2；});例子

htmlhead titleAngular JS自定义指令/title/headbody h2AngularJS示例应用程序/H2 div ng-app=' main app ' ng-controller=' student controller '学生名称=' Mahesh '/studentbr/学生名称=' piyus '/学生/div脚本src=' http :http://Ajax。谷歌api。com/Ajax/libs/angular JS/1。2 .15/棱角分明。量滴JS '/脚本var mainApp=angular.module .mainApp.directive('student '，function(){ var directive={ }；指令。=' Edirective。模板=' student : { { student。姓名} }，第：卷{ {学生。roll no } } '；指令。scope={ student : '=name ' }指令。compile=function(元素，属性){ element。CSS('边框'，' 1px实心# cccccccc ')；var link function=function($ scope，element，attributes){ element。html(' student : ' $ scope。学生。名称'，卷号： ' $作用域。学生。卷号' br/')；element.css('background-color '，' # ff 00 ff ')；}返回链接功能}返回指令；});mainapp。控制器('学生控制器'，函数($scope) { $scope .mahesh={ }；$scope .Mahesh . name=' Mahesh Parashar $ scope .马赫什。辊号=1；$scope .piyus={ }；$scope .Piyush . name=' Piyush Parashar $ scope .皮尤斯。卷号=2；});/脚本/正文/html结果

在网浏览器中打开textAngularJS.html。看到结果如下：

以上就是对AngularJS的自定义指令资料整理，后续继续补充，谢谢大家对本站的支持！