angularJS使用编写KindEditor,UEidtor,jQuery指令，双重绑定
第一步
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body ng-app="app" ng-controller="AppCtrl as vm">
<button ng-click="vm.click()">Click Me</button>
<ui-view></ui-view>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="app.js"></script>
</body>
</html>
第二步 app.js
var app = angular.module('webapp', ['ngRoute', 'oc.lazyLoad']);
第三步
1、KindEditor(自己使用)
//文本编辑器
app.directive('kindeditor', ['$ocLazyLoad',
function ($ocLazyLoad) {
return{
restrict: 'AE',
require: '?ngModel',
link: function (scope, element, attrs, ctrl) { $ocLazyLoad.load('/Scripts/kindeditor/kindeditor-all-min.js')
.then(function() {
var _initContent, editor;
var fexUE = {
initEditor: function () {
editor = KindEditor.create(element[0],
{
width: '100%',
height: '400px',
resizeType: 1,
uploadJson: '/Scripts/kindeditor/asp.net/upload_json.ashx',
fileManagerJson: '/Scripts/kindeditor/asp.net/file_manager_json.ashx',
formatUploadUrl: false,
allowFileManager: true,
afterChange: function () {
ctrl.$setViewValue(this.html());
}
});
},
setContent: function (content) {
if (editor) {
editor.html(content);
}
}
}
if (!ctrl) {
return;
}
_initContent = ctrl.$viewValue;
ctrl.$render = function () {
_initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
fexUE.setContent(_initContent);
};
fexUE.initEditor();
});
}
};
}]);
2,UEditor(借鉴自http://www.jb51.net/article/60435.htm)
angular.module("AdminApp").directive('uiUeditor', ["uiLoad", "$compile", function (uiLoad, $compile) {
return {
restrict: 'EA',
require: '?ngModel',
link: function (scope, element, attrs, ctrl) {
uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.config.js',
'../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.all.js']).then(function () {
var _self = this,
_initContent,
editor,
editorReady = false
var fexUE = {
initEditor: function () {
var _self = this;
if (typeof UE != 'undefined') {
editor = new UE.ui.Editor({
initialContent: _initContent,
autoHeightEnabled: false,
autoFloatEnabled: false
});
editor.render(element[0]);
editor.ready(function () {
editorReady = true;
_self.setContent(_initContent);
editor.addListener('contentChange', function () {
scope.$apply(function () {
ctrl.$setViewValue(editor.getContent());
});
});
});
}
},
setContent: function (content) {
if (editor && editorReady) {
editor.setContent(content);
}
}
};
if (!ctrl) {
return;
}
_initContent = ctrl.$viewValue;
ctrl.$render = function () {
_initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
fexUE.setContent(_initContent);
};
fexUE.initEditor();
});
}
};
}]);
3,jquery.Datatable：
angular.module('AdminApp').directive('uiDatatable', ['uiLoad', '$compile', function (uiLoad, $compile) {
return function ($scope, $element, attrs) {
$scope.getChooseData = function () {
var listID = "";
var chooseData = $element.find("input[name = IsChoose]:checkbox:checked");
if (chooseData.length > 0) {
for (var i = 0; i < chooseData.length; i++) {
listID += chooseData[i].value + ",";
}
}
return listID.substring(0, listID.length - 1);
}
$scope.refreshTable = function () {
$scope.dataTable.fnClearTable(0); //清空数据
$scope.dataTable.fnDraw(); //重新加载数据
}
uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/datatables/jquery.dataTables.min.js',
'../Areas/AdminManage/Content/Vendor/jquery/datatables/dataTables.bootstrap.js',
'../Areas/AdminManage/Content/Vendor/jquery/datatables/dataTables.bootstrap.css']).then(function () {
var options = {};
if ($scope.dtOptions) {
angular.extend(options, $scope.dtOptions);
}
options["processing"] = false;
options["info"] = false;
options["serverSide"] = true;
options["language"] = {
"processing": '正在加载...',
"lengthMenu": "每页显示 _MENU_ 条记录数",
"zeroRecords": '<div style="text-align:center;font-size:12px">没有找到相关数据</div>',
"info": "当前显示第 _PAGE_ 页 共 _PAGES_ 页",
"infoEmpty": "空",
"infoFiltered": "搜索到 _MAX_ 条记录",
"search": "搜索",
"paginate": {
"first": "首页",
"previous": "上一页",
"next": "下一页",
"last": "末页"
}
}
options["fnRowCallback"] = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$compile(nRow)($scope);
}
$scope.dataTable = $element.dataTable(options);
});
$element.find("thead th").each(function () {
$(this).on("click", "input:checkbox", function () {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox').each(function () {
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
})
}
}]);
angularJS使用编写KindEditor,UEidtor,jQuery指令，双重绑定的更多相关文章
- AngularJS系统学习之Directive（指令）
本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- AngularJS快速入门指南04：指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
- 用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?
[翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现 在jQuer ...
- 编写高效的jQuery代码
http://www.css88.com/jqapi-1.9/ 编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上 ...
- 【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示
做项目的时候遇到的问题 1.问题描述 用户在表单某个值输入多个空格,例如:A B,保存至服务器 在列表查询页面中使用bg-bind的指令单向绑定,结果展示位A B,连续的空格被替换为单个空格 ...
- 编写自己的jquery插件
如何编写自己的jquery插件 Jquery的插件主要分为三类: .封装对象方法的插件:大部分插件都是封装对象的插件 .封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquery. ...
- AngularJS（二）：ng-app指令、表达式
本文也同步发表在我的公众号“我的天空” ng-app指令 AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理 ...
- 解密jQuery事件核心 - 绑定设计（一）
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
随机推荐
- python中的ConfigParser模块
1.简介 我们经常需要使用配置文件,例如.conf和.ini等类型,使用ConfigPaser模块可以对配置文件进行操作. 2.示例 现有配置文件test.ini,其内容如下: [section_a] ...
- ActiveMQ 消息的重新投递
正常情况下:consumer 消费完消息后,会发送"标准确认"给 broker,这个确认对象以 MessageAck 类表征: // 省略其他代码.类中定义了各种确认的类型 pub ...
- MySQL变量变更小记
MySQL会随版本的更新,在新版本中淘汰一些variable和引入一些新的variable.在配置variable后不起作用或安全扫描取不到variable值产生告警时,可能正是variable变更的 ...
- dynamic load jar and init spring
public class SpringLoader { private Map<String, Class<?>> classMap = new HashMap<> ...
- swagger访问api, TypeError: Failed to fetch
用swagger访问https://localhost:44360/api/ads/1, 得到的结果是 TypeError: Failed to fetch.一开始以为是后端代码问题,检查了好久,才发 ...
- Linux下使用date命令查看和修改时间
1.查看系统时区和时间,执行命令date -R “-0500”代表西五区(America/New_York),北京的时区为“+0800”(东八区). 2.查看硬件时间,执行命令hwclock --sh ...
- select * from dim.dim_area_no@to_dw
应该是建的有database linksdim是用户名,dim_area_no是表名,to_dw 是建的database links的名,dim_area_no表属于dim用户创建database l ...
- 前端vue项目-关于下载文件pdf/excel（三）
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
- oracle数据导入导出数据与编码格式不正确
1.导入dmp文件 imp ZHCG/ZHCG@ORCL file=E:\20160902.1007.dmp full=y 2.导出数据 exp system/manager@ORCL file ...
- Python3.7.0的安装方法
安装Python3.7.0 1.下载Python-3.7.0.tar.xz包安装 wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.t ...