Question

我有一个仪表板样式的小部件容器，其中包含一个标题面板。我在标题面板中有几个图标，它们实现了以下功能：

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>

这是指令处理Maximize的方法：

      $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类来改变定位样式。

关于$ parent部分，我必须使用它来引用控制器范围，因为我的检查是使用ng-hide和ng-if创建$ scopes，使用$ parent允许我确保我引用控制器$范围变量。

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

<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

1 个答案: