Question

我在AngularJS中有这个标签功能，我希望它可以在我的网站上重复使用，而不必重复逻辑。有没有办法让它成为指令？或者也许是服务？

这是html：

<ul class="expandingTab">
    <li ng-class="{active: isSet(1)}"><a href="#" ng-click="setTab(1)"><span>MY GMM</span></a></li>
    <li ng-class="{active: isSet(2)}"><a href="#" ng-click="setTab(2)"><span>ALL TRANSACTIONS</span></a></li>
</ul>
<div ng-show="isSet(1)">
    <h1>Tab 1</h1>
</div>
<div ng-show="isSet(2)">
    <h1>Tab 2</h1>
</div>

这是JS：

var myApp = angular.module('myApp', []);

myApp.controller('TabController', ['$scope', function($scope) {
    $scope.tab = 1;

    $scope.setTab = function(tab) {
       $scope.tab = tab;
    };

    $scope.isSet = function(checkTab) {
       return $scope.tab === checkTab;
    };
}]);

修改

我真的希望在服务中拥有这些功能，并能够将其作为依赖项注入到将使用它的控制器中。这样我就可以将视图中的所有内容保存在我想要的位置。我觉得我的逻辑很接近，但我仍然无法使它工作。谁能告诉我我做错了什么？

HTML

<ul class="expandingTab">
  <li ng-class="{active: tabs.toggleTabs.isSet(1)}"><a href="#" ng-click="tabs.toggleTabs.setTab(1)"> <span>Tab 1</span></a></li>
  <li ng-class="{active: tabs.toggleTabs.isSet(2)}"><a href="#" ng-click="tabs.toggleTabs.setTab(2)"><span>Tab 2</span></a></li>
</ul>
<div ng-show="tabs.toggleTabs.isSet(1)">
  <h1>Tab 1</h1>
</div>
<div ng-show="tabs.toggleTabs.isSet(2)">
  <h1>Tab 2</h1>
</div>

控制器

var app = angular.module('myApp', ['services']);

app.controller('TabController', ['$scope', 'toggleTabs',function($scope, toggleTabs) {

}]);

服务

var tabsApp = angular.module('services', []);

tabsApp.service('toggleTabs', function() {
  this.tab = 1;
  this.setTab = function(tabSelected) {
    this.tab = tabSelected;
  }
  this.isSet = function(checkTab) {
    return this.tab === checkTab;
  }
});

这是一个包含所有这些代码的Plunker：http://plnkr.co/edit/liT7BIGlIRg9boH81NaY?p=preview

Answer 1

你的指令不起作用，因为你没有为它（你的html）指定一个'模板'和使用隔离范围（范围：{}）。基本上，该指令无法与您放置标签的html对话。（除其他外）

尝试：

ocApp.directive('tabs', function(){
    return{
        restrict: 'A',
        scope: {},
        templateUrl: 'tabs.html', //Put your html into a seperate file and add the path here
        controller: function($scope){
            $scope.tab = 1;

            $scope.setTab = function(tab){
                $scope.tab = tab;
            };

            $scope.isSet = function(checkTab){
                return $scope.tab === checkTab;
            };
        }
    };
});

对于tabs.html

<ul class="expandingTab">
    <li ng-class="{active: isSet(1)}"><a href="#" ng-click="setTab(1)"><span>MY GMM</span></a></li>
    <li ng-class="{active: isSet(2)}"><a href="#" ng-click="setTab(2)"><span>ALL TRANSACTIONS</span></a></li>
</ul>
<div ng-show="isSet(1)">
    <h1>Tab 1</h1>
</div>
<div ng-show="isSet(2)">
    <h1>Tab 2</h1>
</div>

对于index.html，您可以使用

<div tabs></div>

或

<tabs></tabs>

我建议this引用指令（谷歌上和SO上还有很多其他资源）

Answer 2

在回答您的评论时，这里有一个示例，说明如何将内容注入指令以使其更具可重用性。它没有使用标签，但它说明了这个概念。 JsBin example

<强> HTML

<body ng-controller="testController">
  <header bf-nav navs="navs"></header>
</body>

<强>的JavaScript

(function() {
  'use strict';
  var app = angular.module('test', []);

  app.directive('bfNav', navDirective);

  function navDirective() {
    return {
      restrict: 'AE',
      scope: {
        navs: '='
      },
      template: '<nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><ul class="nav navbar-nav"><li ng-repeat="nav in navs" ng-click="setNav(nav.index)" ng-class="{ active: isActive(nav.index) }"><a href="#">{{nav.title}}</a></li></ul></div></nav>',
      controller: navController
    };
  }

  function navController($scope) {
    $scope.activeNav = 1;

    $scope.isActive = function (index) {
      return $scope.activeNav === index;
    };

    $scope.setNav = function (index) {
      $scope.activeNav = index;
    };
  }

  app.controller('testController', ['$scope', testController]);

  function testController($scope) {
    $scope.navs = [
      { index: 1, title: 'Nav 1' },
      { index: 2, title: 'Nav 2' }
    ];
  }
})();

Answer 3

我最终将此作为一项服务，它似乎正是我想要的。我可以在视图中保留html，只需将服务注入我想要使用的控制器，这里的选项卡是代码：

HTML

<ul class="expandingTab">
  <li ng-class="{active: .toggleTabs.isSet(1)}"><a href="#" ng-click="toggleTabs.setTab(1)"><span>Tab 1</span></a></li>
  <li ng-class="{active: toggleTabs.isSet(2)}"><a href="#" ng-click="toggleTabs.setTab(2)"><span>Tab 2</span></a></li>
</ul>
<div ng-show="toggleTabs.isSet(1)">
  <h1>Tab 1</h1>
</div>
<div ng-show="toggleTabs.isSet(2)">
  <h1>Tab 2</h1>
</div>

控制器

var app = angular.module('myApp', ['services']);

app.controller('TabController', ['$scope', 'toggleTabs',function($scope, toggleTabs) {
   $scope.toggleTabs = toggleTabs;
}]);

服务

var tabsApp = angular.module('services', []);

tabsApp.service('toggleTabs', function() {
  this.tab = 1;
  this.setTab = function(tabSelected) {
    this.tab = tabSelected;
  }
  this.isSet = function(checkTab) {
    return this.tab === checkTab;
  }

});

如何使这个角度控制器在整个站点中可重复使用？

3 个答案: