Question

我创建了一个angular tab指令宽度JQuery。

我无法找到它的问题，因为一切似乎都正确。

有人可以查看我做错了什么吗？
我认为我的Angular指令依赖于jQuery。我应该采取哪些措施来实现更多目标＆＃34; Angular＆＃34;？

＆＃13;

angular.module('app', []);

angular.module("app").directive("tabs", function() {
  return {
    restrict: "A",
    link: function(scope, element, attributes) {

      var tabs = element.find("a");
      var sections = links.map(function() {
        return $("#" + this.href.split("#")[1])
      });

      $(tabs[0]).show();
      sections[0].show();

      tabs.bind("click", function(event) {

        event.preventDefault();

        tabs.not(this).hide();
        $(this).siblings("a").hide();

        $.each(sections, function() {
          $(this).hide()
        });
        $("#" + this.href.split("#")[1]).show();

      });
    }
  };
});

＆＃13;

ul.tabs { 
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tabs li {
  display: inline-block;  
  margin: 0;
  padding: 0;
}

ul.tabs li a {
  text-decoration: none;
  color: white;
  padding: 8px;
  display: block;
  background-color: indigo;  
}

div.section {
  background-color: #f0f0f0;
  padding: 8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul class="tabs">
  <li><a href="#section1">Tab 1</a>
  </li>
  <li><a href="#section2">Tab 2</a>
  </li>
</ul>

<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>

＆＃13;

Answer 1

我不会尝试修复您的代码。只是解释一下如何以Angular的方式做到这一点。

jQuery是关于DOM操作的。在Angular中，DOM操作很糟糕。 DOM应该根据模型自动调整自己。标签可以通过以下方式实现：

<ul class="tabs">
  <li><a href ng-click="selectedTab = 1">Tab 1</a>
  </li>
  <li><a href ng-click="selectedTab = 2">Tab 2</a>
  </li>
</ul>

<div class="section" ng-show="selectedTab === 1">Section 1</div>
<div class="section" ng-show="selectedTab === 2">Section 2</div>

这更简单：单击选项卡可更改selectedTab模型值的值。这些部分根据selectedTab的值隐藏/显示自己。

Answer 2

可以是：

angular.module("app").directive("tabs", function() {
  return {
    restrict: "A",
    scope: {
        tabs: '='
    },
    template : '<ul><li ng-repeat="section in tabs" ng-click="handleClick(section)" ng-class="{selected : section.selected}"><a href="section.href">{{section.name}}</a></li></ul>',
    link: function(scope, element, attributes) {
        scope.handleClick = function(section) {
            //....
        }
    }
  };
});

其中标签的数组如[{name：＆＃39; N1＆＃39;，href：＆＃39; #smth＆＃39;，selected：false}，...] in html：

<div tabs="tabs"></div>

您可以添加所选属性，禁用等。另请注意 - 如果您更改标签数组 - 模板将自动重绘。

改进Angular Tabs指令

2 个答案: