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 ...
随机推荐
- Hadoop 2.7.3 完全分布式维护-简单测试篇
1. 测试MapReduce Job 1.1 上传文件到hdfs文件系统 $ jps Jps SecondaryNameNode JobHistoryServer NameNode ResourceM ...
- Echarts 简单报表系列二：折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- POJ2393奶酪工厂
Yogurt factory Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14771 Accepted: 7437 D ...
- Qt Widgets——工具栏和状态栏
本文主要涉及QSizeGrip ,QStatusBar ,QToolBar QToolBar 工具栏默认位于菜单栏下方,其上添加一个个action按钮,用于执行动作 绝大多谢以前都涉及过,只列出 QT ...
- 使用JdbcTemplate操作数据库（二十九）
使用JdbcTemplate操作数据库 Spring的JdbcTemplate是自动配置的,你可以直接使用@Autowired来注入到你自己的bean中来使用. 举例:我们在创建User表,包含属性n ...
- @NotNull, @NotEmpty和@NotBlank之间的区别是什么？
首先是简要描述: [java] view plain copy@NotNull://CharSequence, Collection, Map 和 Array 对象不能是 null, 但可以是空集(s ...
- LY.JAVA面向对象编程.修饰符
2018-07-18 09:20:25 /* 修饰符: 权限修饰符:private,默认的,protected,public 状态修饰符:static,final 抽象修饰符:abstract 类: ...
- node(2) EventEmitter类 事件队列 事件和error事件方法
事件队列的核心:事件触发与事件监听器功能的封装. // 引入 events 模块 var events = require('events'); // 创建 eventEmitter 对象 var e ...
- ngnix笔记
ngnix可通过-s 参数控制,如quit正常退出:reload重载配置文件,具体参考:http://nginx.org/en/docs/switches.html ngnix的指令解释请参考这里:h ...
- 深入margin
1.外边距叠加 外边距叠加是指两个垂直外边距相遇时,这两个外边距会合并成一个外边距,就是二变一,关键是叠加后的外边距会取值两个外边距最大的那个: 例子如下:创建A.B两个盒子,A定义一个margin- ...