1

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

1 回答 1

1

链接功能

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

链接函数具有以下签名：

link: function (scope, element, attrs) {

// manipulate the DOM in here

}

范围

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

元素

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

属性

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

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

工作演示

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()
        }
    };
})
于 2014-07-14T13:17:38.500 回答