Question

我正在使用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那样更改菜单，但我不会解决这个问题。

是否只能在默认菜单中添加项目？

提前致谢

此致

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 Dashboard Framework

1 个答案: