[AngularJS] Debug Directive, terminal, priority
angularjs debug directive terminal Priority
2023-09-14 08:59:21 时间
When you want to show both the data and the struatrue:
You can create a debug directive:
terminal: true --- This means other somthings will be stops.
priority: xxxx ---- This means the directive should be runned first.
egghead.directive("debug", function ($compile) { return { terminal: true, priority: 1000000, link: function (scope, element) { var clone = element.clone(); element.attr("style", "color:red"); element.removeClass("well").addClass("panel panel-danger"); clone.removeAttr("debug"); var clonedElement = $compile(clone)(scope); element.after(clonedElement); } } })
----------------------------
/** * Created by Answer1215 on 9/14/2014. */ var egghead = angular.module("egghead", []); egghead.controller("AppCtrl", function () { var app = this; app.people = [{"firstName":"Sonia","lastName":"Hodges"},{"firstName":"Benedict","lastName":"Morrow"},{"firstName":"Keegan","lastName":"Fields"},{"firstName":"Jade","lastName":"Martinez"},{"firstName":"Jaquelyn","lastName":"Suarez"},{"firstName":"Leo","lastName":"Hughes"},{"firstName":"Skyler","lastName":"Sharp"},{"firstName":"Genevieve","lastName":"Villarreal"},{"firstName":"Beau","lastName":"Hendrix"},{"firstName":"Lara","lastName":"Howard"},{"firstName":"Jonah","lastName":"Crawford"},{"firstName":"Kendall","lastName":"Lane"},{"firstName":"Kimberly","lastName":"Mcclain"},{"firstName":"Ingrid","lastName":"Salinas"},{"firstName":"Moses","lastName":"Mcpherson"},{"firstName":"Britanney","lastName":"Sweeney"},{"firstName":"Patricia","lastName":"Perez"},{"firstName":"Roth","lastName":"Heath"},{"firstName":"Nora","lastName":"Osborne"},{"firstName":"Giacomo","lastName":"Shepard"}] }); egghead.directive("debug", function ($compile) { return { terminal: true, priority: 1000000, link: function (scope, element) { var clone = element.clone(); element.attr("style", "color:red"); element.removeClass("well").addClass("panel panel-danger"); clone.removeAttr("debug"); var clonedElement = $compile(clone)(scope); element.after(clonedElement); } } })
<!DOCTYPE html> <html> <head> <title>Egghead.io</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> </head> <body ng-app="egghead" ng-controller="AppCtrl as app"> <div class="well-large" debug> {{2 + 2}} </div> <ul class="well" debug> <li ng-repeat="person in app.people"> {{person.lastName}}, {{person.firstName}} </li> </ul> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script> <script src="app.js"></script> </body> </html>
相关文章
- 解决angularjs图片加载失败
- 【AngularJS】 # AngularJS入门
- AngularJS进阶(五)Angular实现下拉菜单多选
- AngularJS指令「建议收藏」
- angularjs子组件向父组件传值_react子组件传值
- [angularjs] angularjs系列笔记(七)HTML DOM详解编程语言
- [angularjs] angularjs系列笔记(四)过滤器详解编程语言
- AngularJS将获得长期支持和发展详解编程语言
- angularjs自定义过滤器在页面和控制器中的使用详解编程语言
- AngularJS 2.0 稳定版真的发布了!
- AngularJS入门教程之HelloWorld!
- AngularJS初始化过程分析(引导程序)
- AngularJS语法详解
- AngularJS中的模块详解