Question

我需要展示多个div。它们都在同一个html页面中，但是，它们需要在不同的时间显示，这取决于我的角度应用程序中的哪个控制器正在调用该div。有没有办法评估哪个控制器正在调用page / 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>

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

Answer 1

你正在使用哪种路由？使用ui-router插件很容易，您可以通过命名它们来为单个页面添加视图：

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

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

Answer 2

在ControllerAs文件中定义控制器时，您可以.jsp语法喜欢

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

并在.js文件中，您需要将其定义为

function ExampleController ( ) {
//body
};

没有$scope需要传入.js文件，您在引用ctrl.xyz文件时必须引用.jsp。

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

Answer 3

我们可以使用ng-switch。在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>

在控制器中：根据您的条件为变量'myView'赋值。根据该值，它将显示所需的div elemenet

$scope.myView = 'showCursor';

切换角度控制器

3 个答案: