switching Angular controller

Question

I have multiple divs that I need to show. They are all in the same html page but, they need to show at different times depending on which controller inside my angular app is calling for that div. Is there a way to evaluate which controller is calling the page/div and show that div based on the controller that is calling it? I have a canvas that I need different styles applied to it based on what controller is being used. The only way I can think of to get this done is to repeat the div's in question multiple times and just show the div I need based on the controller used.

**Update: ** The first picture is one view aligned properly the second picture is the same sign with the same alignment in a different view yet the canvases are off from each other. I need the second picture to mimic the first.

In the HTML

<div class="complete-canvas">
    <div style="font-size: 0;" ng-class="{'tc-pointer-none':vm.scope.isReadOnly}">
        <div id="{{vm.isTextArea ? vm.textAreaId : vm.formIdentifier+'phase'+ vm.phaseIndex}}matrixCore" tabindex="0"
             ng-click="vm.onClick($event)"
             ng-keydown="vm.onKeyDown($event)" ng-keypress="vm.onType($event)" ng-focus="vm.isEditable=true"
             ng-blur="vm.isEditable=false">

            <!-- Shows cursor -->
            <div id="{{vm.isTextArea?vm.textAreaId : vm.formIdentifier + 'phase' + vm.phaseIndex}}cursor1"
                 style="z-index:4;"
                 class="cursor cursor-canvas"
                 ng-style="{'opacity':(vm.scope.isReadOnly || !vm.isEditable)?'0':'1'}">
            </div>
            <!-- End shows cursor -->

            <!-- Shows text -->
            <canvas class="special-canvas" id="{{vm.canvas_uuid}}" style="z-index:3;"></canvas>
            <!-- End shows text -->

            <!-- Shows LED canvas-->
            <div id="{{vm.baseDiv_uuid}}" class="base-canvas"
                 style="z-index:2;"
                 ng-style="{top:vm.isTextArea}">
                <canvas id="{{vm.baseCanvas_uuid}}"></canvas>
            </div>
            <!-- End shows LED canvas -->
        </div>
    </div>
</div>

In the CSS:

/* Matrix */

.upper-canvas .lower-canvas .base-canvas .cursor-canvas .special-canvas {
    top: 0;
    left: 0;
}


.complete-canvas {
    margin-left: 4em;
}

.cursor-canvas {
    height: 80px;
    position: absolute;
    outline: none;
}

.base-canvas {
    position: absolute;
    outline: none;
    top: 210px;
}
/* End matrix */

Show us example of how controllers and elements get determined. Sounds like you might need a custom directive — charlietfl
– charlietfl, Commented Jan 15, 2018 at 19:17

Sahil Khurana · Accepted Answer · 2018-01-16 17:30:05Z

We can use ng-switch for this. In HTML :

<div ng-switch="myView">
  <div ng-switch-when="showCursor">
        <!-- Shows cursor -->
        <div id="{{vm.isTextArea?vm.textAreaId : vm.formIdentifier + 'phase' + vm.phaseIndex}}cursor1"
            style="z-index:4;"
            class="cursor cursor-canvas"
            ng-style="{'opacity':(vm.scope.isReadOnly || !vm.isEditable)?'0':'1'}">
        </div>
        <!-- End shows cursor -->
  </div>
  <div ng-switch-when="showText">
    <!-- Shows text -->
    <canvas class="special-canvas" id="{{vm.canvas_uuid}}" style="z-index:3;"></canvas>
    <!-- End shows text -->
  </div>
  <div ng-switch-when="showLed">
        <!-- Shows LED canvas-->
        <div id="{{vm.baseDiv_uuid}}" class="base-canvas"
            style="z-index:2;"
            ng-style="{top:vm.isTextArea}">
            <canvas id="{{vm.baseCanvas_uuid}}"></canvas>
        </div>
        <!-- End shows LED canvas -->
  </div>
</div>

In Controller: Assign value to the variable 'myView' as per your condition. Based on the value it will show the desired div elemenet

$scope.myView = 'showCursor';

Zeal Murapa · Accepted Answer · 2018-01-15 22:49:40Z

which routing are you using? it's easy with ui-router plugin you can diclare views for a single page by naming them as such:

$stateProvider.state ( 'className', {
    url : '/className',
    views: {
        'main@': {
            templateUrl : './modules/className/views/view.html',
            controller : 'classNameCtrl',
        },
        'menubar@': {
            templateUrl : './directives/menubar.html',
            controller : 'menubarCtrl'
        },
        'sidebar@': {
            templateUrl : './directives/sidebar-sales.html',
            controller : 'sidebarCtrl'
        },
        'quickbar@': {
            template : '<quick-form-doc></quick-form-doc>',
            controller : 'quickbarCtrl'
        }
    },

See how each view has a controller and in this case the state loads them all at once, all you then need to do is organize you display and view templates, hide them etc from their respective controller

S.I. · Accepted Answer · 2018-01-16 13:13:52Z

1

You could you ControllerAs syntax while defining the controller in .jsp file like

<div ng-controller="ExampleController as ctrl">

and in .js file, you need to define it as

function ExampleController ( ) {
//body
};

No $scope needs to pass in .js file and you have to refer to ctrl.xyz while referring to .jsp file.

In this way you could you nested controller and get the hold of what you want to show appropriately.

edited Jan 16, 2018 at 13:13

S.I.

3,38112 gold badges53 silver badges87 bronze badges

answered Jan 16, 2018 at 12:38

Akki

831 silver badge11 bronze badges

Collectives™ on Stack Overflow

switching Angular controller

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related