html - 如何在指令模板中定义javascript

Question

下面是我的选项卡式窗口，请建议我在指令模板中的何处为下面的菜单提供 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>'     
  };
});

Answer 1

链接函数

We use the link option to create a directive that manipulates the DOM. The link function is optional. If the compile function is defined, it returns the link function; therefore, the compile function will overwrite the link function when both are defined. If our directive is simple and doesn’t require setting any additional options, we may return a function from the factory function (callback function) instead of an object. When doing so, this function will be the link function.

链接函数具有以下签名:

link: function (scope, element, attrs) {

// manipulate the DOM in here

}

范围

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

元素

实例元素 是要使用指令的元素。我们应该只在 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()
        }
    };
})