精华内容
下载资源
问答
  • directive

    2019-09-23 14:03:46
    directive var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var ...
    var myModule = angular.module(...); 
      
    myModule.directive('directiveName', function factory(injectables) { 
      
     var directiveDefinitionObject = { 
      
       priority: 0,    //指令优先级
      
       template: '<div></div>',  //函数(返回值必须是字符串)或者字符串
      
       templateUrl: 'directive.html', //路径
      
       replace: false,  //是否替换标签
      
       transclude: false, //是否被模板替换
      
       restrict: 'A',  //取值类型,E(元素),A(属性),C(类),M(注释),可以共用如:'EA'
      
       scope: false, //作用域
      
       compile: function compile(tElement, tAttrs, transclude) { 
      
         return { 
      
           pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
      
           post: function postLink(scope, iElement, iAttrs, controller) { ... } 
      
        } 
      
      }, 
      
       link: function postLink(scope, iElement, iAttrs) { ... } 
      
    }; 
      
     return directiveDefinitionObject; 
      
    }); 
    

      

    posted on 2019-04-01 20:59 苏清 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/YaChing/p/10638899.html

    展开全文
  • directive usage

    2020-12-27 10:24:15
    m trying to use v-money as directive and get error [Vue warn]: Failed to resolve directive: money I use example from docs ...
  • stateless directive

    2020-12-06 23:07:14
    this is a proposal for using a static directive. actually every time a directive is used, an object is created. My idea is: if in the directive function is passed a function instead an object, the ...
  • Custom directive

    2021-01-10 08:32:24
    how can i call a custom directive per entity for a custom template, like this : <p>app.directive('rowsEdit', ['$location', function ($location) { return { templateUrl: 'ng/' ...
  • Carousel directive

    2021-01-11 03:42:40
    s carousel directive and I plan to migrate it in topcoat css. Is there any similar directive in topcoat, that I can use? <p>Thanks,</p><p>该提问来源于开源项目:topcoat/topcoat</p></div>
  • Sortable directive

    2020-12-02 18:10:04
    <div><p>Sortable directive not always changes position of elements in array. Try to move the first element to middle position. If I move element up in the list directive works right, but if I move it ...
  • Directive Plugins

    2021-01-09 14:04:46
    I had written a <code>dir</code> directive, and csivanich/dotbot adds a new <code>meta</code> directive. The meta directive is used to print headers which separate logically grouped sections of ...
  • insert directive

    2020-12-28 03:12:50
    <div><p>please i want to add angular-leafet directive but when i do all the app doesn't show . <p>angular.module("sbAdminApp", ["leaflet-directive"] ) .controller('MapCtrl'...
  • AngularJS: directive

    2016-08-23 16:01:18
    directive

    Directives in AngularJS

    AngularJS Tutorial: Demystifying Custom Directives

    Mastering the Scope of the Directives in AngularJS

    Angular 1.x Directive Definition Object: require property

    AngularJS Custom-Directives controllers, require option guide

    Angular directive replace=true

    驼峰命名(Camel Case):

    .directive('symptomTags', function symptomTags() {......});

    使用自定义的directive:

    注意:根据驼峰的名分拆分单词,并且使用"-"连接,要注意这个坑
    <symptom-tags></symptom-tags>

    restrict

    用来设置 directive 的 type: element attribute class ...
    
    The restrict option is typically set to:
    'A' - only matches attribute name
    'E' - only matches element name
    'C' - only matches class name
    'M' - only matches comment
    
    These restrictions can all be combined as needed:
    'AEC' - matches either attribute or element or class name

    scope

    实际上就是起到 map 的作用,可以理解成 map 对象。
    
    Isolating the scope of a directive to reuse such a directive.
    
    @ or @attr
    = or =attr
    < or <attr
    & or &attr
    
    代码中有时会出现问号,比如 &? @?,什么意思呢?
    scope: {
      // same as '=customer'
      customer: '='
      // =? 也表示上面的意思
      customer: '=?'
    },
    The attribute name is the same as the value you want to bind to inside the directive's scope, you can use the above shorthand syntax.
    
    Note that if the directive did not create its own scope, scope: {...}, then scope would reference the outside scope.

    link:

    DOM Manipulation
    
    Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM.
    
    It is executed after the template has been cloned and is where directive logic will be put.
    
    function link(scope, element, attrs, controller, transcludeFn) { ... }, 

    Best Practice:
    Use controller when you want to expose an API to other directives. Otherwise use link.

    controller

    用于定义和指令模版关联的控制器。
    定义与其他指令进行交互的接口函数.

    require

    Directives Communication
    You can compose any directives by using them within templates. Sometimes, you want a component that's built from a combination of directives.
    
    When a directive requires a controller, it receives that controller as the fourth argument of its link function.
    
    require: ['^^myTabs', 'ngModel'],
    ......
    link: function(scope, element, attrs, controllers) {
        var tabsCtrl = controllers[0],
            modelCtrl = controllers[1];
    }
    
    The basic difference is that controller can expose an API, and link functions can interact with controllers using require.

    template

    定义指令的输出内容。可以包含 HTML 、数据绑定表达式,甚至是其它指令。

    templateUrl

    提供指令所用模版的路径。如果模版被定义在 <script> 内,那它可以包含一个 DOM 元素的 id 。

    transclude

    only use transclude: true when you want to create a directive that wraps arbitrary content.

    replace

    replace: true 网页源代码显示如下:
    <div ng-controller="Ctrl" class="ng-scope">
        <div class="ng-binding">hello</div>
    </div>
    
    replace: false 网页源代码显示如下:
    <div ng-controller="Ctrl" class="ng-scope">
        <my-dir>
            <div class="ng-binding">hello</div>
        </my-dir>
    </div>
    
    区别就是代码运行中, directive 要不要再网页源码中显示出来。然道隐藏细节,嘻嘻。
    展开全文
  • HLS directive

    2020-11-01 00:32:09
    directive用途 两种形式 在.tcl 中 写 需要改动directive.tcl 在代码中 #pragma

    directive用途

    for 循环加标签

    directive加的方法

    两种形式
    在.tcl 中 写 需要改动directive.tcl
    在代码中 #pragma

    展开全文
  • battery directive

    2015-02-11 16:01:48
    2006/66/EC battery directive, 欧盟电池CE指令最新版,
  • <div><p>Currently I want to devise a directive with the ability to intervene with the translate directive's translated value. I can get the current translated value by grabbing the element text ...
  • Patient Find Directive

    2020-12-08 23:29:47
    - Refactor Patient Find Directive - Add Find Patient Directive with Inline type - Add Find Patient Directive with Panel type</p><p>该提问来源于开源项目:IMA-WorldHealth/bhima</p></div>
  • directive指令

    2018-08-23 10:12:49
    .directive('myDirective', myDirective) .directive('myDirective1', myDirective1) .directive('myDirective2', myDirective2) myDirective.$inject = []; myDirective1.$inject = []; myDirective2.$inject ...

    .directive('myDirective', myDirective)

    .directive('myDirective1', myDirective1)

    .directive('myDirective2', myDirective2)

    myDirective.$inject = [];

    myDirective1.$inject = [];

    myDirective2.$inject = [];

     

    function myDirective() {

    return {

    restrict: "EACM",

    replace: true,

    template: '<a href="http://www.baidu.com">百度一下</a>'

    }

    }

    E<my-directive></my-directive>

    A<div my-directive></div>

    C<div class="my-directive"></div>

    M<!-- directive:my-directive -->

     

     

    function myDirective1() {

    return {

    restrict: "EMCA",

    replace: true,

    template: "<a href='{{myLink}}'>{{myText}}</a>",

    scope: {

    myLink: "@someAttr",

    myText: "@"

    }

    }

    }

    eg1: <input type="text" ng-model="myurl">

    <my-directive1 some-attr="{{myurl}}" my-text="{{1+2}}"></my-directive1>

     

    function myDirective2() {

    return {

    restrict:"EMCA",

    replace:true,

    template:"<div><input type='text' ng-model='myUrl'><a href='{{myUrl}}'>{{myText}}</a></div>",

    scope:{

    myUrl:"=someAttr",

    myText:"@"

    }

    }

    /*return {

    restrict: 'A',

    replace: true,

    scope: {

    myUrl: '=someAttr', // 经过了修改

    myText: '@'

    },

    template: '\

    <div>\

    <label>My Url Field:</label>\

    <input type="text"\

    ng-model="myUrl" />\

    <a href="{{myUrl}}">{{myText}}</a>\

    </div>\

    '

    }*/

    }

    eg2:

    <input type="text" ng-model="theirUrl">

    <my-directive2 some-attr="theirUrl" my-text="{{1+2}}"></my-directive2>

    <!-- <label>Their URL field:</label>

    <input type="text" ng-model="theirUrl">

    <div my-directive2

    some-attr="theirUrl"

    my-text="Click me to go to Google"></div> -->

     

    展开全文
  • 上一篇讲了directive与controller之间的通信;但是我们directivedirective之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被父directive替换覆盖;及当子directive需要用到父directive...
  • <div><p>translate directive can process attributes now. as per #568 </p><p>该提问来源于开源项目:angular-translate/angular-translate</p></div>
  • Angularjs directive usage

    2020-12-26 17:41:47
    <div><p>Fixed bug with the angularjs directive template by adding a custom wizard to properly format the usage comment. Also added the usage comment to the TypeScript AngularJs directive template. ...
  • <p>First directive declares type of chart to be created inside the second directive The second directive dynamically compiles a third directive The third directive has controller that has data/config...
  • Added Calendar Directive

    2020-12-03 01:05:30
    <p>Changed the directive to pull in events from the ngModelController. Got rid of the template. Made the calendar more generic for the user. <p>Here is a working version of the directive. ...
  • Fix markdown directive

    2020-12-09 00:56:42
    <p>I fixed the second issue by adding a builder function that constructs the final directive function, making the directive name configurable. A much easier and cleaner option would be of course to ...
  • Missing AFTER directive

    2020-12-25 23:49:06
    directive, so every new column have been added at the end of every table. I found "modifyAfter" function but it doesn't add that directive anyway. <p>Thank you for any help. </p><p>该...
  • Create datepicker directive

    2020-12-26 01:26:53
    <div><p>Create a date picker directive to match mustang PL.</p><p>该提问来源于开源项目:ushahidi/platform</p></div>
  • Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,590
精华内容 12,236
关键字:

directive