Fatal编程技术网
  • javascript/
  • Javascript 我怎样才能使这个角度控制器在整个站点上重复使用？

Javascript 我怎样才能使这个角度控制器在整个站点上重复使用？

javascript angularjs tabs

Javascript 我怎样才能使这个角度控制器在整个站点上重复使用？,javascript,angularjs,tabs,angularjs-directive,Javascript,Angularjs,Tabs,Angularjs Directive,我用AngularJS制作了这个标签功能，我希望它可以在整个网站上重复使用，而无需重复逻辑。有没有办法让它成为一个指令？或者是服务 以下是html： <ul class="expandingTab"> <li ng-class="{active: isSet(1)}"><a href="#" ng-click="setTab(1)"><span>MY GMM</span></a></li> <

我用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>
编辑

我真的希望在一个服务中有这个功能，并且能够将它作为一个依赖注入到将使用它的控制器中。这样，我可以将所有内容保留在视图中我想要的位置。我觉得我的逻辑很接近，但我还是无法让它工作。谁能告诉我我做错了什么

HTML

服务

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;
  }
});

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:

您的指令不起作用，因为您没有为它指定一个“模板”（您的html）并使用隔离作用域（作用域：{}）。基本上，该指令不能与您放置选项卡的html对话。（除其他事项外）

尝试：

用于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>

    

  • 

  • 


表1
表2
对于index.html，您将使用

<div tabs></div>
或
我建议您参考指令（谷歌上还有许多其他资源等）

作为对您评论的回应，这里有一个示例，展示了如何将内容注入指令，使其更易于重用。它不使用标签，但它说明了这个概念

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' }
    ];
  }
})();

（函数（）{
"严格使用",；
var app=角度模块（'测试'，[]）；
应用指令（“bfNav”，NAV指令）；
函数navDirective（）{
返回{
限制：“AE”，
范围：{
导航：'='
},
模板：'
，
控制器：导航控制器
};
}
功能控制器（$scope）{
$scope.activeNav=1；
$scope.isActive=函数（索引）{
返回$scope.activeNav==索引；
};
$scope.setNav=函数（索引）{
$scope.activeNav=索引；
};
}
app.controller（'testController'，['$scope'，testController]）；
函数testController（$scope）{
$scope.navs=[
{索引：1，标题：'NAV1'}，
{索引：2，标题：'Nav 2'}
];
}
})();
我最终将此作为一项服务来完成，而这似乎正是我想要的。我可以将html保留在视图中，只需将服务注入到我想要使用的任何控制器中。选项卡上的代码如下：

HTML

服务

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;
  }
});

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;
  }

});
你认为这比使用工厂或服务更好吗？我想知道在不同的页面上重新使用tabs.html时，我将如何设置它的内容。您使用它的目的是什么？头球？或者这是应用程序中的一个组件？它是应用程序中用于切换各种功能的组件content@Ian这是您应该使用的方法。指令旨在用于创建可重用组件。工厂或服务将是一个糟糕的选择。要更改选项卡内容，您可以通过其隔离作用域属性将该数据传递到指令本身。感谢您的响应。我喜欢你的代码，希望你能帮我把最后一块拼凑起来。我需要考虑选项卡隐藏/显示的内容，但我希望视图中有HTML，而不是像标题一样的JS。我如何将隐藏的div放置在指令之外，并且让ng show=“isSet（1）”仍然访问指令的控制器？@Ian Idk如果我完全理解您的意思，但是，就像我的示例中的导航是如何重复的，您将以相同的方式重复选项卡内容div，以说明每个选项卡。每个选项卡的标题和内容必须以某种格式存在于模板之外（即从web服务、平面文件或手动输入提供JSON），并注入到指令中，如图所示；否则，您的指令将无法重用。 
<body ng-controller="testController">
  <header bf-nav navs="navs"></header>
</body>

(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' }
    ];
  }
})();

<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;
  }

});