示例可重用的web component方式组织angular应用模块
在online web应用中，经常有这样的需求，能够让用户通过浏览器来输入代码，同时能够根据不同的代码来做语法高亮。大家已知有很多相应的javascript库来实现语法高亮的功能，比如codemirror就是一个不错的选择。而我们使用angular开发web应用，那么就希望能够使用directive来实现这个功能，以便能够很好的重用。https://www.polymer-project.org/ 可以得到更多可重用web组件的信息
下面是如何使用我们的 <code-editor> 的：
<html ng-app="demo">
<head>
<title>Posts</title>
</head>
<body>
<code-editor syntax="javascript" ng-model="content.code">
var sum = function (a, b) {
return a + b;
}
</code-editor>
<textarea ng-model="content.code" cols="100" rows="50"></textarea>
</body>
</html>
这个directive的目标是：像 <pre> 元素一样接受接受输入代码文本，同时能够和 <ngModel> 一样将输入文本作为model放到变量中去。该directive同时也需要将代码在codemirror代码编辑器中展示。
首先我们来创建基本的文件夹结构。我们创建一个components/codeEditor目录作为我们整个code editor组件的工作目录。在这个目录中，我们将该组件所用到的javascript库（实际就是codemirror库）以及css文件放到vendor目录中。创建一个新的codeEditor.js作为directive代码，一个code-editor.html模板也放在component根目录中。
使用这种方式来组织代码实际上就是在遵循web component开发的模式了。现在在code-editor.html模板文件的div元素上初始化codeMirror作为开始。
code-editor.html:
<div class="code-editor"></div>
codeEditor.js:
angular.module("demo").directive("codeEditor", function(){
return {
restrict: "E",
replace: true,
scope: {
syntax: "@",
theme: "@"
},
templateUrl: "components/codeEditor/code-editor.html",
link: function(scope, element, attrs) {
var editor = CodeMirror(element[0], {
mode: scope.syntax || "javascript",
theme: scope.theme || "vibrant-ink",
lineNumbers: true
});
}
};
});
在上述js代码中，调用codeMirror函数使得div元素具有codeMirror的代码高亮功能，同时lineNumber显示出来。这时已经具有了代码输入和高亮的功能：
这时代码编辑器已经工作了，但是你发现我们在使用code-editor directive的html文件中的代码却并没有被渲染。这是因为，默认情况下，angular将丢弃code-editor元素的内容，替而代之为该directive的template：code-editor.html的内容。为了让angular能将包含在原始code-editor元素内的内容保存并使用起来，我们需要设置code-editor元素的transclude属性为true.
另外一点是：我们不准备使用 ng-transclude directive来插入内容。反而，我们将执行一个手动的transclude，以便允许内容直接传递到editor。下面是相关代码：
codeEditor.js:
angular.module("demo").directive("codeEditor", function(TextUtils){
return {
restrict: "E",
replace: true,
transclude: true,
scope: {
syntax: "@",
theme: "@"
},
templateUrl: "components/codeEditor/code-editor.html",
link: function(scope, element, attrs, ctrl, transclude) {
var editor = CodeMirror(element[0], {
mode: scope.syntax || "javascript",
theme: scope.theme || "vibrant-ink",
lineNumbers: true
});
transclude(function(clonedEl){
var initialText = TextUtils.normalizeWhitespace(clonedEl.text());
editor.setValue(initialText);
});
}
};
});
上述代码中，当transclude属性被设置为true，我们在link函数中就有了第5个参数--transclude函数。该函数有几种不同的用法，在我们的例子中，我们将传入一个callback函数作为第一个参数。这个callback被调用时将被传入一个原始transcluded content作为参数，这样我们就可以访问到那块内容并且被传递给editor去。TextUtils是一个简单的服务，半酣一个normlizeWhitespace函数，该函数可以清除leading whitespace.
最后一件事情是我们需要让ngModel可以和editor工作起来，这样我们就可以将他和input,textarea等绑定起来。第一步，我们需要require ngModel属性。
angular.module("demo").directive("codeEditor", function(TextUtils){
return {
restrict: "E",
replace: true,
require: "?ngModel",
transclude: true,
scope: {
syntax: "@",
theme: "@"
},
templateUrl: "components/codeEditor/code-editor.html",
link: function(scope, element, attrs, ngModelCtrl, transclude) { ... }
};
});
// ....
通过设置require属性，我们告知这个directive从ngModel中包含controller的引用到link函数中。通过增加一个?在directive名称前，我们意味着这是一个选项，以便阻止angular在ngModel并不存在的情况下抛出异常。既然我们在directive的link函数中已经可以访问ngModel的controller了，我们需要了解几个用于同步数据到model的几个函数：
- ngModelCtrl.$setViewValue(someValue)
$setViewValue函数用于在model上赋值。当editor的内容变化时，我们需要调用该函数。
- ngModelCtrl.$render
$render属性需要被赋一个函数值。这个函数是一个当model value变化时调用的callback。注意model的value并不会传递到这个函数中去。一旦model的value发生变更时，我们需要设置editor的内容为model的value
- ngModelCtrl.$viewValue
$viewValue属性包含model的当前值。每当$render回调被调用时我们需要使用它设置editor的value。
看看下面的代码：
angular.module("demo").directive("codeEditor", function($timeout, TextUtils){
return {
restrict: "E",
replace: true,
require: "?ngModel",
transclude: true,
scope: {
syntax: "@",
theme: "@"
},
templateUrl: "components/codeEditor/code-editor.html",
link: function(scope, element, attrs, ngModelCtrl, transclude){
var editor = CodeMirror(element[0], {
mode: scope.syntax || "javascript",
theme: scope.theme || "default",
lineNumbers: true
});
if(ngModelCtrl) {
$timeout(function(){
ngModelCtrl.$render = function() {
editor.setValue(ngModelCtrl.$viewValue);
}
})
}
transclude(function(clonedEl){
var initialText = TextUtils.normalizeWhitespace(clonedEl.text());
editor.setValue(initialText);
if(ngModelCtrl){
$timeout(function(){
if(initialText && !ngModelCtrl.$viewValue){
ngModelCtrl.$setViewValue(initialText);
}
editor.on('change', function(){
ngModelCtrl.$setViewValue(editor.getValue());
});
});
}
});
scope.$on('$destroy', function(){
editor.off('change');
});
}
}
});
当model变化时，既然我们使得require ngModel为可选而非必选，我们需要确保ngModel controller是否确实存在。在$render函数中，我们将model的value使用$viewValue属性赋值到editor的contents中去。这将避免一个Undefined value被设置到editor中去。
每当editor变更时，我们设置model的value。同时我们使用一个$timeout来调用它是因为为了等待model初始化。
最后我们删除和editor关联的用于更新model的event handler。当你使用非angular事件时，他们需要在$destroy回调中被清除。这将确保directive完全清除避免memory leak。
https://www.codeschool.com/blog/2015/03/06/digging-advanced-angularjs-directives/
示例可重用的web component方式组织angular应用模块的更多相关文章
- 使用纯粹的JS构建 Web Component
原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...
- Web Component探索
概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...
- Web Component总结
Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...
- Web Component
前言 Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持Web Compone ...
- WCF服务的Web HTTP方式
NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.现将WCF服务设置步骤记录如下: endpoint通讯协议设置成 webHttpBinding en ...
- Web Component 文章
周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...
- hadoop笔记之Hive的管理(web界面方式)
Hive的管理(二) Hive的管理(二) Web界面方式 端口号9999 启动方式:hive --service hwi 通过浏览器来访问:http://<IP地址>:9999/hwi/ ...
- js Web存储方式
JSON是数据交互中最常用的一种数据格式. 由于各种语言的语法都不同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串> 传递之后,可以讲JSON字符串,在解析为JSON对象. ...
- Salesforce知识整理（一）之Lightning Web Component Tools
目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...
随机推荐
- json_encode charset
json_encode utf-8 mysql charset utf8
- HDU 5014Number Sequence
思路: 对于一个二进制100011: 尽量将填满:填成111111: 然后有一个很好算的方法 gets(n)表示二进制下N有多少位,N^X=(111111)2 X=111111^N; 其实答案可以直接 ...
- Unity3D 使用 Editor 脚本,自定义 脚本的属性面板
1. 先有一个普通的 继承自 MonoBehaviour 的脚本. 2. 创建一个 Editor 文件夹, 写 关于 UnityEditor 的脚本 都要放在这个文件夹下,不然会编译出错. 具体的实现 ...
- 让IE支持max-width
1:expression在FF下不支持 2:*html内的width不要带单位(px). 3:width:expression(eval(this.offsetWidth>1600?1600:t ...
- acdream1116 Gao the string!(扩展KMP)
今天是字符串填坑的一天,首先填的第一个坑是扩展KMP.总结一下KMP和扩展KMP的区别. 在这里s是主串,t是模式串. KMP可以求出的是以s[i]为结尾的串和 t前缀匹配的最长的长度.假如这个长度是 ...
- 最大 / 小的K个数
在<剑指offer>上看到的,而且Qunar去年的校招笔试也考了这题,今天晚上去西电腾讯的宣讲会,来宣讲的学长也说他当时一面的时候面试官问了“一亿个数据的最大的十个数”的面试题.今晚就写写 ...
- MongoDB 安装，启动与基本使用
一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C++ ...
- Gradle Goodness: Continue Build Even with Failed Tasks
If we run a Gradle build and one of the tasks fails, the whole build stops immediately. So we have f ...
- C连接oracle（PROC*C）
1. 安装oralce 10g 2.建立数据库和用户 配置VS2005环境 proc需要嵌入式环境 在C/C++常规里面加入 D:\oracle\product\10.2.0\db_1\precom ...
- soa思想，就是远程服务调用
dubbo是Java下的一套RPC框架(soa思想)