Angular指令1
Angular的指令
也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的。其实就是一个中等水平的类。
var myModule = angular.module(...); myModule.directive('namespaceDirectiveName', function factory(injectables) { var directiveDefinitionObject = { restrict: string, priority: number, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function controllerConstructor($scope, $element, $attrs, $transclude), require: string, link: function postLink(scope, iElement, iAttrs) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } } }; return directiveDefinitionObject; });
属性作用
-
restrict 定义指令的限制,有四种,E element也就是元素,比如自定义一个my-menu的指令(或者叫组件),这玩意还可以组合,‘EA'这样子。
E element
A attribute
C class
M comment -
priority 设置元素跟随指令的优先级,不设是0,ng-repeat是1000,值越大优先级越高。
-
template 指定一段字符串模板
-
templateUrl 指定一个Url地址的模板
-
replace true替换模板内容到元素,false增加模板内容到元素。
-
transclude 反式包含,本人推测可能是trans include的合成词,老外的小花招,就是把指令里的内容,给替换到模板里面去,有点象是传参数,或者是Decorator模式
这块找到的资料给的例子都太复杂,这里本人给出一个最简单的例子,当然这个模式那可玩的花样相当复杂,还可以做更深层次的东西。
``
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
2011-01-13 WebM给我们带来什么?H.264又给我们带来什么?Google不支持H.264对未来会产生怎样的影响?