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 ...
随机推荐
- 时间序列(六): 炙手可热的RNN: LSTM
目录 炙手可热的LSTM 引言 RNN的问题 恐怖的指数函数 梯度消失* 解决方案 LSTM 设计初衷 LSTM原理 门限控制* LSTM 的 BPTT 参考文献: 炙手可热的LSTM 引言 上一讲说 ...
- Pick-up sticks
Pick-up sticks Stan has n sticks of various length. He throws them one at a time on the floor in a r ...
- 浅谈MVVM
MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致. 唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewMod ...
- Python3+pdfminer+jieba+wordcloud+matplotlib生成词云（以深圳十三五规划纲要为例）
一.各库功能说明 pdfminer----用于读取pdf文件的内容,python3安装pdfminer3k jieba----用于中文分词 wordcloud----用于生成词云 matplotlib ...
- dvwa安装、配置、使用教程（Linux）
一.搭建LAMP环境 首先搭建好LAMP环境,如没配好参见“Linux+Apache+MySQL+PHP配置教程” 或者使用官方推荐的XAMPP:https://www.apachefriends.o ...
- PyQt+Html+Js
先做记录,后面有时间在仔细研究 https://www.cnblogs.com/jiangjh5/p/7209315.html?utm_source=itdadao&utm_medium=re ...
- 微信支付 php兼容问题
总结: php7 已删除 HTTP_RAW_POST_DATA 获取时需要file_get_contents("php://input"); 下面的是兼容方法. //存储微信的回 ...
- ci框架memcached使用
首先第一步需要安装memcached扩展 安装方法这里就不叙述了 application/config/memcached.php配置 $config = array( 'default' => ...
- Maven常见jar包依赖
<!-- servlet --> <dependency> <groupId>javax.servlet</groupId> <artifactI ...
- Win10系列：UWP界面布局基础6
资源合并 前面提到过,可以将资源字典定义在单独的XAML文件中,这样的文件被称为资源字典文件.那么,在需要引用文件中的资源时可以通过ResourceDictionary元素的MergedDiction ...