在 span 元素中使用 AngularJS ng-class

Question

我有一个 dashboard-style 小部件容器，其中包含一个 header 面板。我在 header 面板中有几个图标实现了以下功能：

1) 折叠小部件 2）最大化小部件 3）启动小部件设置 4) 关闭小部件

第 2 项是我遇到的问题。我需要在单击时用恢复图标替换最大化图标。

使用折叠行为作为指导，我可以使用 ng-class 来切换图标，但是我的 ng-click 会有所不同，因为我在指令中调用了一个方法。

<div class="widget-header panel-heading">
 <h3 class="panel-title">
  <span class="widget-title" ng-dblclick="editTitle(widget)" ng-hide="widget.editingTitle">{{widget.title}}</span>
  <form action="" class="widget-title" ng-show="widget.editingTitle" ng-submit="saveTitleEdit(widget)">
   <input type="text" ng-model="widget.title" class="form-control">
  </form>
  <span class="label label-primary" ng-if="!options.hideWidgetName">{{widget.name}}</span>
  <span ng-click="removeWidget(widget);" class="glyphicon glyphicon-remove" ng-if="!options.hideWidgetClose"></span>
  <span title="config" ng-click="openWidgetSettings(widget);" class="glyphicon glyphicon-cog" ng-if="!options.hideWidgetSettings"></span>

  <span title="maximize" ng-show="widget.gadgetConfigured" ng-click="maxResizer($event)" class="glyphicon" ng-class="{'glyphicon-resize-full': !widget.maximized, 'glyphicon-plus': widget.maximized}" ></span>

  <span title="collapse" ng-show="widget.gadgetConfigured" ng-click="widget.contentStyle.display = (widget.contentStyle.display === 'none' ? 'block' : 'none')" class="glyphicon" ng-class="{'glyphicon-plus': widget.contentStyle.display === 'none', 'glyphicon-minus': widget.contentStyle.display !== 'none' }"></span>
 </h3>
</div>

这里是处理最大化的指令方法：

      $scope.maxResizer = function (e) {
            // TODO: properly restore the window to original position..      

            var widget = $scope.widget;
            var widgetElm = $element.find('.widget');
            
            var ht_diff = 200;  // height differential            

            widget.setWidth(window.innerWidth);
            $scope.widget.setHeight(window.innerHeight-ht_diff);

            $scope.$emit('widgetChanged', widget);            
            $scope.$apply();
            
            $scope.$broadcast('widgetResized', {
                width: window.innerWidth,
                height: window.innerHeight-ht_diff
            });
            // this will refresh the chart width within the container - 03/30/2015 BM:  
            kendo.resize($(".k-chart"));
                                    
            var pixelHeight = widgetElm.height();

            // kendo chart - refreshes chart height within the container - 03/30/2015 B
            var chart = widgetElm.find('.k-chart').data("kendoChart");
            if (chart != undefined) {
                chart.setOptions({ chartArea: { height: pixelHeight - (pixelHeight * .10) } });
                chart.resize($(".k-chart"));
            }
            widget.maximized = true;
        }

如您所见，我将属性设置为 true/false widget.contentStyle.maximized。

谁能帮我弄清楚哪里出错了？也就是说，最大化图标仍然存在，因此不会更改为加号图标。

Answer 1

我构建了一个简单的解决方案来处理关于根据状态切换图标的相同 UI 功能。我没有使用任何 javascript 来处理实际调整大小，我使用 CSS classes 来改变定位样式。

关于 $parent 部分，我不得不用它来引用控制器作用域，因为我的检查是使用 ng-hide 和 ng-if 来创建 $scopes，使用 $parent 可以确保我引用的是控制器 $scope 变量。

在您的情况下，例如，ng-click="maxResizer($event); $parent.ifFullscreen" 可以使您现有的代码和 class 切换逻辑一起工作。

<a ng-click="$parent.isFullscreen = !$parent.isFullscreen;">
    <i class="glyphicon"
        ng-class="'glyphicon-resize-' + ($parent.fullscreenTable ? 'small' : 'full')"
        tooltip="{{$parent.fullscreenTable ?  'restore' :'fullscreen'}}"
        tooltip-placement="{{$parent.fullscreenTable ? 'left' : 'top'}}"></i>
</a>

我已经采用了您的示例代码并应用了我的建议，为您提供了一个实时工作示例。 http://plnkr.co/edit/zYq5MtwP54rr2L5IGw4k?p=preview

这是我实际更改的唯一一行

<span title="maximize" ng-show="widget.gadgetConfigured" ng-click="maxResizer($event); widget.contentStyle.maximized = !widget.contentStyle.maximized" class="glyphicon" ng-class="'glyphicon-resize-' + (widget.contentStyle.maximized ? 'small' : 'full')" ></span>

在 span 元素中使用 AngularJS ng-class

using AngularJS ng-class in a span element

angularjs

angularjs-directive