AngularJS ui router nested views – AngularJS nested directive controller example

In this Post We Will Explain About is AngularJS ui router nested views – AngularJS nested directive controller example With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to nested ui-view example

In this post we will show you Best way to implement nested routing angularjs example, hear for How to angular ui-router multiple views with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS nested directive controller example

index.html

<div ng-app="app">
  <h1>AngularJS Directive Controllers Examples</h1>
  <outer-directive></outer-directive>
  <inner-directive></inner-directive>
</div>

index.js

angular.module('app', [])
  
  .directive('innerDirective', function() {
    return {
      restrict: 'E',
      require: '^?outerDirective',
      scope: {},
      template: '<div class="inner-directive">I am simple the inner directive Examples <span ng-if="!shouldShowBtn">create a simple without the outer new directive</span><button ng-click="changeClass()" ng-if="shouldShowBtn">Toggle simple Outer Class</button></div>',
      link: function(scope, elem, attrs, liveCtrl) {
        scope.changeClass = function() {
          if (liveCtrl) {
            liveCtrl.changeClass('dkblue');
          }
        }
        
        scope.shouldShowBtn = (liveCtrl !== null);
      }
    }
  })

  .directive('outerDirective', function() {
    return {
      restrict: 'E', 
      scope: {},
      template: '<div class="outer-directive" ng-class="liveCtrl.cssClass">I am the outer directive {{liveCtrl.something}}<inner-directive></inner-directive></div>',
      controllerAs: 'liveCtrl',
      controller: function() {
        var liveCtrl = this;
        liveCtrl.cssClass = '';
        liveCtrl.changeClass = function(cssClass) {
          liveCtrl.cssClass = (!liveCtrl.cssClass) ? cssClass : '';
        };
      }
    }
  })
;

Example

READ :  Laravel 6 custom validation Date Format Examples

I hope you have Got angularjs ui-router nested views And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Post Views: 2,159