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

Question

我工作的角度仪表板框架(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-点击callEvent函数是调用.这个函数是在库中添加的：

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

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

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

我希望我的努力能对其他人有所帮助。

问候