文档章节

学习 kityminder & angular (十三)

刘军兴
 刘军兴
发布于 2015/12/11 17:27
字数 1202
阅读 507
收藏 1
点赞 1
评论 0

今天继续学习  kityminder-editor 以及所用及的 angular.

已知在页面中使用 angular, 整个 editor 部分界面由 directive <kityminder-editor /> 产生, 于是我们
进一步进入到该 directive 里面, 对应模板 html 文件内容为:

<!-- 这是 kityminder-editor 指令的模板文件 kityminderEditor.html 部分内容 -->
<div class="minder-editor-container">
    <div class="top-tab" top-tab="minder" editor="editor" ng-if="minder" ></div>
    ...下面其它部分内容略...
</div>

这里我们关心一下内部那个 div.top-top, 这里我们单独拆解出这个 div 放到页面中测试:

<div ng-app ng-controller 略>
  <div top-tab></div>
</div>

信不信, 最简写为这个样子, 都能出来结果(kityminder-editor 的部分工具栏), 如下图样子:

一部分工具栏示例

 

(为了严谨, 这里要额外加点说明: 这只是部分工具栏, 后面部分因为错误未出现, 原因是我们尚未提供正确的
minder,editor 对象在 scope 中)

根据现在已知的 angularjs 知识, 能出来东西是 div 元素中那个 top-tab 属性在发挥作用. 那么它应是一个指令.
让我们去找, 果然在 ui/directive/topTab 目录下找到它. (还有很多这种 directive, 以后就不描述找的过程了...) 

该指令内部的实现我们先不着急关心, 先注意到引用的 div 有几个属性, 分别解释一下:
   1. class='top-tab' 这是 div css class, 检查结果 html 有此 class;
   2. top-tab='minder' 这里 top-tab 指定使用 topTab 指令, ='minder 映射父 scope 属性;
      如果写作 minder='minder' 可能更清晰一些.
   3. editor='editor' 这里映射父 scope 的 editor 属性. 起到隔离 scope 的目的.
   4. ng-if='minder' 让我们仔细看看此 ng-if 预定义指令.

看名字 ng-if 是判断, 估计是根据 if 后面表达式如果为真则显示, 否则不显示. 让我们做实验:

<h1 ng-if='kitty'>Hello kitty!</h1>

效果就是页面先显示出该 Hello kitty, 然后消失. 如果我们在 MainController 中为 scope 提供一个 kitty 数据:

angular_demo_module.controller('MainController', function($scope) {
     $scope.kitty = "无论什么值,只要可判断为真即可";
     // 也可以赋值 $scope.kitty = 0, = null, = undefined, = '' 实验!
  });

这时, 页面顺利显示出 Hello kitty 了. 顺便说下, 用注释中的值是不出来的.

要学习就要认真, 这里是文档说明: https://docs.angularjs.org/api/ng/directive/ngIf
重点是 ngIf 会删除/或重创建部分 DOM 树基于对表达式的求值. 这与 ngShow, ngHide 使用的方法,
设置 css display 属性不同. 所以, 用起来要根据情况选对了.

 

======

进一步进入 top-tab directive 模板, 有一个 tabset, 里面嵌有三个 tab. 前面看到过的 undo-redo 就是属于
第一个 tab 的第一个子元素. 现在先继续其它子元素. 后面再回头研究 tabset/tab 指令.

问题: 如果了解这里的设计思想?

指令 append-node: 界面显示出 '插入下级主题' 等几个按钮. 执行代码涉及到 commandBinder, 其似乎是
   一个 kityminder-editor 提供的服务. 细节以后再看.

指令 arrange: 界面显示出 `上移', `下移' 按钮. 脚本直接写在 ng-click, ng-disabled 里面.

指令 operation: 显示 `编辑', `删除' 两个按钮. 有 ng-click, ng-disabled.
   综合上面三个指令, 一般用 ng-click 处理点击事件; 有的在 scope 中提供对应命令方法.

指令 hyper-link: 显示 `链接' 按钮, 在下拉列表中有两个子项. 点击会出现一个对话框.
   对话框似乎涉及到 ui/dialog/hyperlink/hyperlink.ctrl.js (另一个东西), 稍后看.

指令 image-btn: 显示 `图片' 按钮, 下拉列表有两个子项. (模式类似上面的指令)
   插入图片显示的对话框中还能搜索图片于百度, 但是结果是 forbidden 的~~

指令 note-btn: 显示 `备注' 按钮. 备注可能涉及到 markdown 编辑器, 暂时略.

指令 priority-editor: 显示 X,1-9 (任务)优先级按钮. 用 css 显示按钮, 用 ng-repeat 重复产生出来.

指令 progress-editor: 显示任务进度. (和上一个类似).

指令 resource-editor: 可用资源编辑框. 这几个指令业务上讲都与做工程进度图有关, 严格来说不属于脑图.

指令 template-list: 显示脑图显示形式选择. (如树图,鱼骨等)

指令 theme-list: 显示颜色 theme 选择.

指令 layout: 显示 `整理布局' 按钮.

指令 style-operator: 显示 `清除样式', `复制样式', `粘贴样式' 按钮.

指令 font-operator 显示: 字体, 字号, bold, italic, underline, color 等按钮.

指令 expand-level: 显示 `展开' 按钮.

指令 select-all: 显示 `全选' 按钮.

指令 search-btn: 显示 `搜索' 按钮.

 

那么, 设计思想是什么? 看着此 toolbar 界面像 Office 的 toolbar?
创建了很多 directive 似乎方便写? 是否需要这么多名字? 何况每个 directive 都有对应 html 要加载?
有没有别的办法? 若领导说要定制一下这里, 该怎么做?

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 150
码字总数 226172
作品 0
昌平
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 昨天 ⋅ 0

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 27分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 29分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 34分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 37分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 40分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 41分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 44分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 47分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 47分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 48分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部