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模式
    这块找到的资料给的例子都太复杂,这里本人给出一个最简单的例子,当然这个模式那可玩的花样相当复杂,还可以做更深层次的东西。

``


这里是用户的内容,要反向包含到指令里去

posted @   人工智能-群513704292  阅读(650)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 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对未来会产生怎样的影响?
点击右上角即可分享
微信分享提示