如何在指令模板中定义javascript

Posted 2023-02-22

【中文标题】如何在指令模板中定义javascript

【英文标题】：How to define javascript inside directive template

【发布时间】：2014-09-04 08:08:04

【问题描述】：

下面是我的选项卡式窗口，请建议我在指令模板内为以下菜单提供 javascript 的位置。

下面是我的指令

app.directive('basictabs', function() 
    return 

  restrict: 'AE',
  replace: true,
 template :'<div class="tab-menu">\
     <ul>\
     <li class="unselected"><a href="#">Tab 01</a></li>\
     <li class="selected"><a href="#">Tab 02</a></li>\
     <li class="unselected"><a href="#">Tab 03</a></li>\
     <li class="unselected"><a href="#">Tab 04</a></li>\
     </ul>\
     <div class="tab-content">\
      <div class="tab-01">\
       Content in Tab 01 goes here.\
      </div>\
      <div class="tab-02">\
       Content in Tab 02 goes here.\
      </div>\
      <div class="tab-03">\
       Content in Tab 03 goes here.\
      </div>\
      <div class="tab-04">\
       Content in Tab 04 goes here.\
      </div>\
   </div>\
   </div>'     
  ;
);

【问题讨论】：

什么意思？你想提供什么JS？

它可能在很多地方。没有足够的细节来提供好的答案

【参考方案1】：

链接功能

我们使用链接选项来创建一个操作 DOM 的指令。 链接功能是可选的。如果定义了编译函数，它 返回链接函数；因此，编译函数将 当两者都被定义时覆盖链接函数。如果我们的指令是 简单，不需要设置任何额外的选项，我们可以 从工厂函数返回一个函数（回调函数） 而不是一个对象。这样做时，此功能将是链接 功能。

链接函数具有以下签名：

link: function (scope, element, attrs) 

// manipulate the DOM in here

范围

指令用于从指令内注册手表的范围。

元素

instance 元素 是要使用指令的元素。我们应该只在 postLink 函数中操作这个元素的子元素，因为子元素已经被链接了。

属性

实例属性是在该元素上声明的规范化（pascalCased）属性列表，并在所有指令链接函数之间共享。这些作为JavaScript 对象传递。

您可以在链接函数中使用JQuery 来操作DOM，如示例所示

Working Demo

app.directive('basictabs', function() 
    return 
        restrict: 'AE',
        replace: true,
        template: '<div id="tabs">\
            <ul>\
                <li><a href="#tabs-1">Tab 1</a></li>\
                <li><a href="#tabs-2">Tab 2</a></li>\
                <li><a href="#tabs-3">Tab 3</a></li>\
            </ul>\
            <div id="tabs-1">\
                <p>Content for Tab 1</p>\
            </div>\
            <div id="tabs-2">\
                <p>Content for Tab 2</p>\
            </div>\
            <div id="tabs-3">\
                <p>Content for Tab 3</p>\
            </div>\
          </div>',
        link: function(scope, elm, attrs) 
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
        
    ;
)