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