Tutorial 12.14 Creating Directives that Communicate

-
******************************************INDEX.HTML*****************************************************
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-tabs-production</title>
 

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
 

 
</head>
<body ng-app="docsTabsExample">
  <my-tabs>
  <my-pane title="Hello">
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>
  <my-pane title="World">
    <em>Mauris elementum elementum enim at suscipit.</em>
    <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
  </my-pane>
</my-tabs>
</body>
</html>
******************************************INDEX.HTML*****************************************************
********************************************script.js***************************************************
(function(angular) {
  'use strict';
angular.module('docsTabsExample', [])
  .directive('myTabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: ['$scope', function MyTabsController($scope) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        };

        this.addPane = function(pane) {
          if (panes.length === 0) {
            $scope.select(pane);
          }
          panes.push(pane);
        };
      }],
      templateUrl: 'my-tabs.html'
    };
  })
  .directive('myPane', function() {
    return {
      require: '^^myTabs',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      templateUrl: 'my-pane.html'
    };
  });
})(window.angular);

/*
Copyright 2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

********************************************script.js***************************************************
*******************************************my-pane.html***************************************************
<div class="tab-pane" ng-show="selected">
  <h4>{{title}}</h4>
  <div ng-transclude></div>
</div>
*******************************************my-pane.html***************************************************
*******************************************my-Tab.html***************************************************

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="select(pane)">{{pane.title}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>
*******************************************my-Tab.html***************************************************

Comments

Post a Comment

Popular posts from this blog

Tutorial 12.12 Creating a Directive that Wraps Other Elements 3

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclusion-scope-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsIsoFnBindExample">   <div ng-controller="Controller">   {{message}}   <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">     Check out the contents, {{name}}!   </my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*****************************...
Read more