在span元素中使用AngularJS ng-class

Question

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

1）崩溃插件 2）最大化插件 3）发射窗口小部件设置 4）靠近插件

项目＃2是一个其中我遇到了麻烦。点击时，我需要用“还原”图标替换最大化图标。

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

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

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

 
\t \t <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> 
 
\t </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; 
 
     }

正如你所看到的，我有一个属性设置为真/假widget.contentStyle.maximized。

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

Answer 1

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

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

例如，您的情况下，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>