文档章节

学习 kityminder & angular (十三)

刘军兴
 刘军兴
发布于 2015/12/11 17:27
字数 1202
阅读 674
收藏 1

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

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 0
昌平
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen
05/21
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
4
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
7
0
EOS错误代码及中文释义

本文集汇总了EOS区块链常见错误代码及其含义,完整错误代码集请查看 EOS错误代码集 - 汇智网 EOS错误代码列表如下, <table class="table table-striped"> <thead> <tr><th>错误代码</th><t......

汇智网教程
昨天
2
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
4
0
kiss原则

KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”。换句话说来,”简单就是美“。KISS 原则源于 David Mamet(大卫马梅)的电...

NB-One
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部