CODEWITHSUNDEEP
javascripthtmlcssangularjs
Perry Craft
Perry Craft

Reputation: 309

switching Angular controller

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 */

first view second view

Upvotes: 1

Views: 140

Answers (3)

Sahil Khurana
Sahil Khurana

Reputation: 1

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';

Upvotes: 1

Akki
Akki

Reputation: 83

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.

Upvotes: 1

Zeal Murapa
Zeal Murapa

Reputation: 221

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

Upvotes: 1

Related Questions