学习 kityminder & angular (十三)

今天继续学习  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 要加载?
有没有别的办法? 若领导说要定制一下这里, 该怎么做?