Question

我使用垂直药丸（http://getbootstrap.com/components/#nav-pills）并且想知道如何在AngularJS方面跟踪选择哪种药丸？

每个药丸都有自己的一组输入字段，根据选择的药丸，我需要从输入字段中获取信息。我在网上搜索过，似乎无法找到一个好的解决方案。

Answer 1

创建指令。在指令模板上添加药丸并在指令的link函数中添加事件监听器到药丸容器（事件委托），以便您可以跟踪选择的药丸并根据它更改逻辑。

添加plunker白色基础。

  angular.module('pills', [])
          .directive('pills', directiveFactory);

  function directiveFactory () {
    return {
      restrict: 'A',
      link: link,
      templateUrl: 'pills.html'
    };

    function link (scope, element, attrs) {
      element.bind('click', 'nav-pills', click);

      function click (event) {
        event.preventDefault();
         console.log(event.target, 'event is an object');
      }
    }
  }

Answer 2

而不是让Angular 检测哪个药丸处于活动状态（jQuery思维方式），你应该让Angular set 哪个标签处于活动状态。

我可以写很多关于如何使用现有的Bootstrap设置使Angular工作（基本上，使用ng-class将Bootstrap的“活动”类绑定到Angular范围/控制器中的变量，并使用ng-click处理点击），但你所描述的内容听起来很像(Angular) UI Bootstrap的类型为“pill”的垂直制表符。尽管UI Bootstrap大致是Bootstrap组件进入Angular模型的一个端口，但切换并不是一件容易的事。但是，由于您的用例听起来非常复杂，我认为这是值得的。

如何在angularjs中获取选定的Bootstrap药丸？

2 个答案: