自定义编辑菜单 Angular Dashboard Framework答案

【问题标题】：Custom edit menu Angular Dashboard Framework自定义编辑菜单 Angular Dashboard Framework
【发布时间】：2016-05-04 08:46:13
【问题描述】：

我正在使用 Angular Dashboard Framework (sdorra)，我想更改编辑菜单；

默认情况下，单击菜单我可以添加小部件、编辑仪表板、保存和放弃更改，如下所示。

我想添加一个具有新功能的新图标，在特殊情况下，我想添加仪表板的复制功能。

我的 html 如下：

<div ng-app="isdashboard" ng-controller="dashboardController" 
                             ng-init="init('$name','$id', '$sid')" style="color:#A60076">
    <adf-dashboard name="dashboard" adf-model="dashboard.model" />
</div>

我的控制器是

'use strict';
var model = {
    rows: [{
        columns: [{
            styleClass: 'col-md-4',
            widgets: []
        },{
            styleClass: 'col-md-8',
            widgets: []
        }]
    }]
};

angular.module('isdashboard', ['adf', 'adf.widget.clock'])
.config(function(dashboardProvider){
    dashboardProvider.structure('4-8', {
        rows: [{
            columns: [{
                styleClass: 'col-md-4',
                widgets: []
            }, {
                styleClass: 'col-md-8',
                widgets: []
            }]
        }]
    }),

    dashboardProvider.structure('6-6', {
        rows: [{
            columns: [{
                styleClass: 'col-md-6',
                widgets: []
            }, {
                styleClass: 'col-md-6',
                widgets: []
             }]
         }]
      })
   })
   .controller('dashboardController', function($scope, $http){

       $scope.init = function(name, id, sid){
          ....
   };

   $scope.dashboard = {
       model: model
   };
});

我知道有可能像这个例子 http://angular-dashboard-framework.github.io/angular-dashboard-framework/#/sample/03 那样更改菜单，但我不会这个解决方案。

是否可以只在默认菜单中添加一个项目？

提前致谢

问候

【问题讨论】：

标签： javascript html angularjs dashboard

【解决方案1】：

我解决了问题，我混合了解决方案。首先我创建了一个editTitletemplate，就像默认的一样：

<h1> {{model.title}}
<span style="font-size: 16px" class=pull-right>

<a href ng-if=editMode title="custom item" ng-click=callEvent('adfDashboardCustom')> 
    <i class="glyphicon glyphicon-repeat adf-flip"></i>
</a>

<a href ng-if=editMode title="add new widget" ng-click=addWidgetDialog()>
    <i class="glyphicon glyphicon-plus-sign"></i>
</a> 

<a href ng-if=editMode title="edit dashboard" ng-click=editDashboardDialog()>
    <i class="glyphicon glyphicon-cog"></i>
</a> 

<a href ng-if=options.editable title="{{editMode ? 'save changes' : 'enable edit mode'}}" ng-click=toggleEditMode()>
    <i class=glyphicon x-ng-class="{'glyphicon-edit' : !editMode, 'glyphicon-save' : editMode}"></i>
</a>

<a href ng-if=editMode title="undo changes" ng-click=cancelEditMode()>
    <i class="glyphicon glyphicon-repeat adf-flip"></i> 
</a>

在 ng-click callEvent 函数被调用。该函数已添加到库中：

$scope.callEvent = function(param){
    $rootScope.$broadcast(param, name, model);
};

事件由仪表板处理，如下所示：

$scope.$on('adfDashboardCustom', function (event, name, model) {
    //doSomething
}

我希望我的努力对别人有用。

问候

【讨论】：