用AngularJS的指令实现tabs切换效果（angularjs tab切换）

25-02-16 16

在本文中，我们将详细介绍用AngularJS的指令实现tabs切换效果的各个方面，并为您提供关于angularjstab切换的相关解答，同时，我们也将为您带来关于angularjs–包含angular

在本文中，我们将详细介绍用AngularJS的指令实现tabs切换效果的各个方面，并为您提供关于angularjs tab切换的相关解答，同时，我们也将为您带来关于angularjs – 包含angular-ui tabset指令并遇到“多指令要求截断/隔离范围”错误、angularjs – 将$state或$stateParams注入到使用angular ui路由器不可能的指令中、angularjs – 将其他指令添加到angular.js中的同一元素的指令、AngularJS 中的指令实践开发指南(一)的有用知识。

本文目录一览：

用AngularJS的指令实现tabs切换效果（angularjs tab切换）
angularjs – 包含angular-ui tabset指令并遇到“多指令要求截断/隔离范围”错误
angularjs – 将$state或$stateParams注入到使用angular ui路由器不可能的指令中
angularjs – 将其他指令添加到angular.js中的同一元素的指令
AngularJS 中的指令实践开发指南(一)

用AngularJS的指令实现tabs切换效果（angularjs tab切换）

先来看看效果图

首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样：

<A-deirective>
  <B-directive></B-directive>
  <C-directive></C-directive>
</A-directive>

下面这个tabs功能的指令，刚好用到了这个，可以让代码更加简洁。

<!DOCTYPE html>
<html lang="en" ng-app="docsTabsExample">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script></script>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <script src="lib/angular-route.js" type="text/javascript"></script>
 <script src="lib/jquery-2.1.4.min.js"></script>
 <script src="lib/bootstrap.js" type="text/javascript"></script>
 <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
 <style>
 .active{
  background: red;
 }
 </style>
</head>
<body ng-controller="appCon">
 <my-tabs><!--最外层指令-->
 <my-pane tittle="ONE"><!--内层指令-->
  <h4>One</h4>
  <p>angularangularangularangularangularangularangular</p>
 </my-pane>
 <my-pane tittle="TWO"><!--内层指令-->
  <h4>Two</h4>
  <p>angularangularangularangularangularangularangular</p>
 </my-pane>
 <my-pane tittle="THERE"><!--内层指令-->
  <h4>There</h4>
  <p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap</p>
 </my-pane>
 <my-pane tittle="FIVE"><!--内层指令-->
  <h4>five</h4>
  <p>jqueryjqueryjqueryjqueryjqueryjqueryjquery</p>
 </my-pane>
 </my-tabs>
</body>
<script>

 var app=angular.module("docsTabsExample",[''template''])
   .controller("appCon",["$scope",function($scope){

   }])
   .directive("myTabs", function () {
    return{
    restrict:"EA",
    transclude: true,
    scope:{},
    templateUrl:"myTabs.html",
    controller:["$scope", function ($scope) {//使用controller让最内层指令来继承外层指令，这样内层就可以通过scope的传导，来与外层指令进行数据之间的传递
     var panes = $scope.scopes = [];//

     $scope.select= function (pane) {//实现tabs功能
     angular.forEach(panes, function (scope) { //遍历所有内存指令scope，统一隐藏内容。
      scope.selected=false;
     });
     pane.selected=true;//通过ng-repeat只
     };

     this.addScope= function (scope) {//由内层指令来继承，把内层指令的scope，传到进外层指令进行控制
     if(panes.length===0){
      $scope.select(scope);
     }
     panes.push(scope);//把内层指令数组，传入外层指令scope数组。
     }
    }]
    }
   })
   .directive("myPane", function () {
    return{
    restrict:''EA'',
    scope:{
     tittle:''@''
    },
    transclude: true,
    require:''^myTabs'',//继承外层指令
    templateUrl:"myPane.html",
    link: function (scope, elemenet,attrs,myTabsController) {
     myTabsController.addScope(scope);//把内层指令的scope存入到外层指令中，让外层遍历。
    }
    }
   });
 angular.module("template",[])
   .run(["$templateCache", function ($templateCache) {
    $templateCache.put("myTabs.html","<divtable''>" +
      "<ulnav nav-tabs''>" +
      "<li ng-repeat=''pane in scopes'' ng-{active:pane.selected}''>" +
       "<a href=''#'' ng-click=''select(pane)''>{{pane.tittle}}<a/>" +
      "</li>" +
      "</ul>" +
      "<div ng-transcludetab-content''></div>" +
      "</div>")
   }])
   .run(["$templateCache", function ($templateCache) {
    $templateCache.put("myPane.html","<divtable-pane'' ng-show=''selected'' ng-transclude>" +
      "</div>")
   }])

</script>
</html>

整个指令的的实现原理就是通过指令的继承，把内层指令的scope暴露到外层指令中，这样就可以在外层指令控制内层指令的显示。这里还有另外一个要说明的，为了让指令更加有层次，更加有逻辑性，使用了ng-transclude，让指令的template内容，反向插入到标有ng-transclude的内容中。

结束语

好了，以上就是AngularJS通过指令实现tabs切换功能的全部内容，大家都学会了吗？希望对大家学习AngularJS能有所帮助，如果有疑问可以留言交流。谢谢大家对的支持。

您可能感兴趣的文章:

AngularJS实现动态切换样式的方法分析
AngularJS标签页tab选项卡切换功能经典实例详解
详解AngularJS ng-class样式切换
angularJs的ng-class切换class
使用AngularJS2中的指令实现按钮的切换效果
AngularJS路由切换实现方法分析
AngularJS实现使用路由切换视图的方法
AngularJS入门教程之多视图切换用法示例
使用AngularJS实现可伸缩的页面切换的方法
angularjs实现Tab栏切换效果

angularjs – 包含angular-ui tabset指令并遇到“多指令要求截断/隔离范围”错误

我正在尝试扩展角度ui选项卡功能,我遇到了包装问题.

这个plunker是tabset指令未包装：

http://plnkr.co/edit/AhG3WVNxCal5fZOUbSu6?p=preview

这个plunker包含我第一次尝试包装tabset指令：

http://plnkr.co/edit/naKXbeVOS8nizwDPUrkT?p=preview

初始包装方法是直接包装.但是,我在替换模板中引入额外的div,以避免“多个指令要求隔离范围”和“多个指令要求跨越”角度错误,并确保发生转移.

主要代码片段：

.directive('urlTabset',function() {
  return {
    restrict: 'E',transclude: true,replace: true,scope: {
      tabManager: '='
    },controller: [ "$scope",function($scope) {
      var tabManager = $scope.tabManager;
    }],template:
      '<div>' +
        '<tabset>' +
          '<div ng-transclude>' +
          '</div>' +
        '</tabset>' +
      '</div>'
  };
})

.directive('urlTab',function() {
  return {
    require: '^urlTabset',restrict: 'E',scope: { tabName: '@' },link: function(scope,element,attrs,urlTabsetCtrl) {
    },template:
      '<div>' +
        '<tab>' +
          '<div ng-transclude>' +
          '</div>' +                  
        '</tab>' +
      '</div>'
  };
});

但是,我认为模板中的额外的div引起了问题.这是在我的模板添加它们的地方的额外div的展开的标签集.

http://plnkr.co/edit/kjDs7xJcZqltCAqUSAmX?p=preview

所以合乎逻辑的是消除div …但是这是我需要帮助的地方.有没有人知道一个干净的方式来做到这一点,而不会触发“多指令要求隔离范围”和“多指令要求交叉”角度误差.这是一个失败的尝试.

http://plnkr.co/edit/0C6lFNhfdTVcF7ahuN3G?p=preview

Error: Multiple directives [urlTab,tab] asking for transclusion on: <tabhttps://www.jb51.cc/tag/cop/" target="_blank">cope ng-scope">

BTW,如果你想知道我想要做什么,我的最终目标是使用传递给urlTabset的tabManager属性来自动填充tab指令中的字段(由urlTab包装).更具体地说,这正是我的目标：

.directive('urlTab',urlTabsetCtrl) {
      scope.tabs = urlTabsetCtrl.tabs;
      scope.tabSelected = urlTabsetCtrl.tabSelected;
    },template:
      '<tab active="tabs[tabName].active" disabled="tabs[tabName].disabled" select="tabSelected(tabName)" ng-transclude>' +
      '</tab>'
  };
});

上面的模板显然不行,但它给了我想要做的一切.

而且我可以使用一个解决方案,它需要包装指令没有一个孤立的范围.我可以通过将状态存储在控制器上下文来解决.

如果您正在尝试增加角色的功能,您可能会更好地使用属性指令而不是全新的元素.我可能会误会,但是看起来你不想改变DOM的一般结构,而不是用角度替换你的指令.例如,使用HTML

<tabset url-tabset>
    <tab url-tab>
        <tab-heading>
            <i></i> Details
        </tab-heading>
        Details content.
    </tab>
    <tab url-tab>
        <tab-heading>
            <i></i> Impact
        </tab-heading>
        Impact tab content.
    </tab>                    
</tabset>

意味着您不再需要执行任何交叉或模板更换.这将一起避免这个问题.

这将留下您要用于扩充的属性的隔离范围的问题.而不是使用这个,您可以使用scope：true来获取与选项卡和选项卡集相同的隔离作用域(尽管您无法在此定义绑定),并且可以通过使用$parse和attrs来使用正常的绑定值来获取属性.

您的指令(具有您的第二个空格的功能)然后最终看起来像这样.

angular.module('plunker',['ui.bootstrap'])

.directive('urlTabset',function() {
  return {
    restrict: 'A',require: 'tabset',// Confirm the directive is only being used on tabsets
    controller: [ "$scope","$attrs",function($scope,$attrs) {
      var tabManagerGetter = $parse($attrs.tabManager); // '='
      this.getTabManager = function() {
        return tabManagerGetter($scope);
      };

      // fun stuff here
    }]
  };
})

.directive('urlTab',function() {
  return {
    require: ['tab','^urlTabset'],restrict: 'A',ctrls) {
      var urlTabsetCtrl = ctrls[1];

      function getTabName() {
        return attrs.tabName; // '@'
      }

      var tabManager = urlTabsetCtrl.getTabManager();

      // fun stuff here
    }
  };
});

angularjs – 将$state或$stateParams注入到使用angular ui路由器不可能的指令中

当我将$state / $stateParams注入指令时,它们在unique函数中不可用,为什么？

'use strict';
angular.module('TGB').directive('uniqueSchoolclassnumberValidator',function (schoolclassCodeService) {
    return {
        restrict: 'A',require: 'ngModel',link: function (scope,element,attrs,ngModel) {
            ngModel.$asyncValidators.unique = function (schoolclassNumer) {

                var schoolyearId = 1; // Read schoolyearId from the $stateParams.id but how to inject?
                return schoolclassCodeService.exists(schoolyearId,schoolclassNumber);
            };
        }
    };
});

UPDATE

正如您在我的谷歌Chrome控制台中看到的那样$stateParams或$state未定义！

您将需要一个Controller作为指令的一部分,其中可以注入$stateParams.沿着这些方向的东西应该工作(未经测试)

(function (){
angular
  .module('TGB')
  .directive('uniqueSchoolclassnumberValidator',schoolclassDirective);

  schoolclassDirective.$inject = ['$state','$stateParams','$compile','schoolclassCodeService'];

  function  schoolclassDirective($state,$stateParams,$compile,schoolclassCodeService) {
    var directive = {
      restrict: 'A',controller : MyController
      link: function (scope,listofCtrls) {
         // you will need to get the ngModelCtrl from the list of controllers as you have the require field set above
          var ngModelCtrl = listofCtrls[0]//[1];
          var myCtrl = listofCtrls[1]//[0];
          ngModelCtrl.$asyncValidators.unique = function (schoolclassNumer) {

            var schoolyearId = myCtrl.id; 
            return schoolclassCodeService.exists(schoolyearId,schoolclassNumber);
          };
       };
    };


  function MyController($state,$stateParams){
      var scope = this;
     scope.id= $stateParams.schoolyearId;
  }

  return directive;
}}

另请注意wiki中$stateParams的使用情况

如果它是父状态的一部分,获得1which的另一种方法是定义解决方案function of the parent state并在控制器内使用它.

angularjs – 将其他指令添加到angular.js中的同一元素的指令

如何创建将其他指令添加到元素的指令？

例如,我想：

<input tag/>

链接为：

<input ng-pattern='/[\\w\\d]+/' ng-maxlength='10'/>

解决方法

我不认为$compile(),链接函数或终端是必需的. Angular会自动为我们编制电话.

.directive('tag',[function() {
  return {
    priority: 1000,compile: function(telement,attrs) {
      attrs.$set('tag',null);
      attrs.$set('ngMaxlength','10');
      attrs.$set('ngPattern','/[\\w\\d]+/');
    }
  };
}]);

使用此HTML进行测试：

<input ng-model="test" ng-init="test=2" tag>
{{test}}

Plunker.

AngularJS 中的指令实践开发指南(一)

指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。在这篇文章的最后（第二部分），我会指导你如何使用Angular指令来创建一个简单的记事本应用。

概述

一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来说，静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法，我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。如果你写过AngularJS的应用，那么你一定已经使用过指令，不管你有没有意识到。你肯定已经用过简单的指令，比如 ng-mode,ng-repeat,ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat 重复特定的元素，ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽，你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。

jQuery视角

想象一下使用jQuery如何创建一个日期选择器。首先，我们在HTML中添加一个普通的输入框，然后通过jQuery调用 $(element).dataPicker() 来将它转变成一个日期选择器。但是，仔细想一下。当一个设计人员过来检查HTML标记的时候，他/她能否立刻猜到这个字段实际上表示的内容？这只是一个简单的输入框，或者一个日期选择器？你需要查看jQuery代码来确定这些。而Angular的方法是使用一个指令来扩展HTML。所以，一个日期选择器的指令可以是下面的形式：

rush:js;">

或者是这样：

rush:js;">

这种创建UI组建的方式更加直接和清晰。你可以轻易地通过查看元素就明白这到底是什么。

创建自定义指令：

一个Angular指令可以有以下的四种表现形式： 1. 一个新的HTML元素（） 2. 元素的属性（） 3. CSS class（） 4. 注释（）当然，我们可以控制我们的指令在HTML中的表现形式。下面我们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与 controller 一样，但是它返回的是一个拥有指令配置属性的简单对象(指令定义对象) 。下面的代码是一个简单的 Hello World 指令。

rush:js;"> var app = angular.module('myapp',[]); app.directive('helloWorld',function() { return { restrict: 'AE',replace: 'true',template: '