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 – 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


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


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) {
        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 : '';


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( readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article( Are Most Always Welcome.