angularjs vs twitter 引导标签 javascript

Question

我正在使用 angularJS 迈出第一步。在“代码学校”视频 (http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/2/video/1) 中，有一个示例代码可以在 Angular 中制作标签：

HTML

  <section class="tab" ng-controller="TabController as tab">
    <ul class="nav nav-pills">
      <li ng-class="{active:tab.isSet(1)}">
        <a href ng-click="tab.setTab(1)">Description</a></li>
      <li ng-class="{active:tab.isSet(2)}">
        <a href ng-click="tab.setTab(2)">Specs</a></li>
      <li ng-class="{active:tab.isSet(3)}">
        <a href ng-click="tab.setTab(3)">Reviews</a></li>
    </ul>
    <div ng-show="tab.isSet(1)">
      <h4>Description</h4>
      <blockquote>{{product.description}}</blockquote>
    </div>
    <div ng-show="tab.isSet(2)">
      <h4>Specs</h4>
      <blockquote>Shine: {{product.shine}}</blockquote>
    </div>
    <div ng-show="tab.isSet(3)">
      <h4>Reviews</h4>
      <blockquote></blockquote>
    </div>
  </section>

JavaScript：

  app.controller('TabController', function(){
    this.tab = 1;

    this.setTab = function(newValue){
      this.tab = newValue;
    };

    this.isSet = function(tabName){
      return this.tab === tabName;
    };
  });

我知道 twitter bootstrap 有自己的 JavaScript 来管理动态标签 (http://getbootstrap.com/javascript/#tabs)。

我的问题是：angularjs 在这里使用 bootstrap javascript 吗？我猜不会。如果不是（虽然这意味着 angular 只使用 bootstrap 的 CSS），那么为什么 angular 重新发明轮子 = 实现与 bootstrap 的 javascript 代码做同样事情的新代码？我的意思是，为什么要编写不同的代码来做同样的事情，为什么不使用现有的代码？

也许这只是本教程的问题 - 但有没有办法让 Angular 使用本机引导程序的 javascript？

Answer 1

bootstrap 提供单向绑定数据。然而，angularJS 提供了双向绑定。我建议你应该看看 angular-ui。如果你想在 angularjs 中使用 bootstrap，你应该搜索关键字“custom directive angularjs”。

Answer 2

重新发明轮子？他们只使用ng-show，它只是将元素中的显示样式更改为none。

Angular 使用任何脚本都没有问题，您只需要以 Angular 的方式进行操作。在这种情况下，它被称为指令（大多数情况下，当您要操作 DOM 时，这就是这种方式）。

所以对于角度指令，你可以使用template 或templateUrl，template 你给出一个字符串，templateUrl 你给出一个文件路径。在你的情况下，我建议你放置一个新的 html 文件并在那里写下你的标签内容。

所以在你的 tabs.html 文件中

<div class="tab-content">
  <div class="tab-pane active" class="home">...</div>
  <div class="tab-pane" class="profile">...</div>
  <div class="tab-pane" class="messages">...</div>
  <div class="tab-pane" class="settings">...</div>
</div> 

根据bootstrap docs，您的指令应如下所示

myapp.directive('theNameOfMyDirective', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'the path to my html file', you can use only template too and writte your html as string, but in your case I think it is more clean if you do it in a diferent file
        link: function (scope,element){
            // angular.element() this is similar to $() in Jquery or Jquery()
            angular.element(element).find('.profile').on('click', function (e){
                e.preventDefault()
                $(this).tab('show');
            });
            angular.element(element).find('.home').on('click', function (e){
                e.preventDefault()
                $(this).tab('show');
            });
            //some other tabs
        }  
    }
});

由于我们将指令限制为 E（元素），因此我们必须添加此 html 以在我们需要的任何地方呈现我们的标签

<theNameOfMyDirective></theNameOfMyDirective>

有关自定义指令的更多信息http://tutorials.jenkov.com/angularjs/custom-directives.html