自定义编辑菜单 Angular 仪表板框架

Question

我正在使用 Angular 仪表板框架 (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，但我不会采用这种解决方案。

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

提前致谢

此致

Answer 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
}

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

此致

自定义编辑菜单 Angular 仪表板框架

Custom edit menu Angular Dashboard Framework

javascript

html

angularjs

dashboard