ng-admin项目中的可复用指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00325/article/details/148551723

ng-admin项目中的可复用指令详解

ng-admin Add an AngularJS admin GUI to any RESTful API 项目地址: https://gitcode.com/gh_mirrors/ng/ng-admin

前言

在ng-admin项目中，开发者可以通过使用预置的可复用指令来快速构建管理后台的交互界面。这些指令封装了常见的操作逻辑，能够显著提升开发效率。本文将详细介绍这些指令的使用方法和应用场景。

基础操作按钮指令

ng-admin提供了三种基础操作按钮指令，用于处理单条记录的常见操作：

显示按钮 <ma-show-button>
编辑按钮 <ma-edit-button>
删除按钮 <ma-delete-button>

这些按钮会自动关联到当前记录对应的视图页面。使用方法如下：

entity.listView().fields([
    // 其他字段...
    nga.field('actions', 'template').template(
        '<ma-show-button entry="entry" entity="entity" size="xs"></ma-show-button>'
    )
]);

参数说明：

entry: 当前记录对象
entity: 当前实体对象
size: 按钮尺寸（如xs表示超小尺寸）

导航按钮指令

除了记录操作按钮外，ng-admin还提供了两种导航按钮：

创建按钮 <ma-create-button>
列表按钮 <ma-list-button>

这些按钮用于跳转到指定实体的相关视图。特别值得一提的是，<ma-create-button>支持设置默认值，这在处理关联关系时特别有用：

post.editionView().fields([
    // 其他字段...
    nga.field('').label('')
        .template('<ma-create-button entity-name="comments" size="sm" label="创建关联评论" default-values="{ post_id: entry.values.id }"></ma-create-button>')
]);

带过滤条件的列表按钮

<ma-filtered-list-button>指令允许开发者创建一个跳转到列表视图的按钮，并且可以预设过滤条件：

entity.listView().fields([
    // 其他字段...
    nga.field('', 'template').label('')
        .template('<ma-filtered-list-button entity-name="comments" filter="{ post_id: entry.values.id }" size="sm">')
]);

这个功能在展示关联数据时非常实用，比如在文章列表中查看某篇文章的所有评论。

快捷方法：listActions()

为了进一步简化代码，ng-admin提供了listActions()快捷方法。这个方法可以快速添加一组操作按钮到列表视图：

listView.listActions(['edit', 'delete']);

上述代码等价于：

var template = '<ma-edit-button entry="entry" entity="entity" size="xs">' +
               '</ma-edit-button>' +
               '<ma-delete-button entry="entry" entity="entity" size="xs">' +
               '</ma-delete-button>';
listView.fields([
    nga.field('actions', 'template').template(template)
]);

如果需要自定义按钮文本，可以直接传入完整的HTML字符串：

listView.listActions([
    '<ma-edit-button entry="entry" entity="entity" label="编辑" size="xs">' +
    '</ma-edit-button>',
    '<ma-delete-button entry="entry" entity="entity" label="删除" size="xs">' +
    '</ma-delete-button>'
]);