Javascript 开关角度控制器

我需要展示多个div。它们都在同一个html页面中，但它们需要在不同的时间显示，这取决于我的angular应用程序中调用该div的控制器。是否有方法评估调用该页面/div的控制器，并根据调用该页面/div的控制器显示该div？我有一个画布，我需要根据所使用的控制器应用不同的样式。我能想到的唯一方法是重复多次有问题的div，然后根据所使用的控制器显示我需要的div

**更新：** 第一张图片是一个正确对齐的视图，第二张图片是相同的标志，在不同的视图中具有相同的对齐方式，但画布彼此分离。我需要第二张图片来模仿第一张

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

---

您使用哪种路由？使用ui路由器插件很容易，您可以将单个页面的视图命名为：

$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'
        }
    },

$stateProvider.state（'className'{
url:“/className”，
观点：{
“main@”：{
templateUrl:'./modules/className/views/view.html'，
控制器：“classNameCtrl”，
},
“菜单栏”：{
templateUrl:'./directions/menubar.html'，
控制器：'menubarCtrl'
},
“侧边栏”：{
templateUrl:“./directions/sidebar sales.html”，
控制器：“sidebarCtrl”
},
“快速工具栏”：{
模板：“”，
控制器：“quickbarCtrl”
}
},

---

查看每个视图如何拥有一个控制器，在这种情况下，状态一次加载所有控制器，然后您需要做的就是组织显示和查看模板，从各自的控制器中隐藏它们等在

.jsp

文件中定义控制器时，您可以使用

ControllerAs

语法 像

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

没有

$scope

需要传入

.js

文件，并且在引用

.jsp

文件时必须引用

ctrl.xyz

---

通过这种方式，您可以创建嵌套的控制器，并获得想要适当显示的内容。

我们可以使用ng开关来实现这一点。 在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>

---

向我们展示如何确定控制器和元素的示例。听起来您可能需要一个自定义指令

function ExampleController ( ) {
//body
};

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

$scope.myView = 'showCursor';