Question

下面是我的标签窗口，请建议我在指令模板中为下面的菜单提供javascript。

enter image description here

下面是我的指示

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

链接功能

我们使用link选项创建一个操纵DOM的指令。链接功能是可选的。如果定义了编译函数，那么返回链接函数;因此，编译功能将在定义两者时覆盖链接函数。如果我们的指令是我们可以简单，不需要设置任何其他选项从工厂函数返回一个函数（回调函数）而不是一个对象。这样做时，此功能将成为链接功能

链接功能具有以下签名：

link: function (scope, element, attrs) {

// manipulate the DOM in here

}

<强>范围

指令用于在指令内注册监视的范围。

<强>元素

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

<强> ATTRS

实例属性是在此元素上声明的标准化（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()
        }
    };
})

如何在指令模板中定义javascript

1 个答案:

链接功能