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 = falsevar 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');});});})}
}]);

转载于:https://www.cnblogs.com/qiyecao/p/6908306.html

angularJS使用编写KindEditor,UEidtor,jQuery指令，双重绑定相关推荐

Angularjs编写KindEditor,UEidtor指令
目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS ...
AngularJS快速入门指南04：指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
[置顶] 编写自己的JQUERY插件
如何编写自己的jquery插件 Jquery的插件主要分为三类: 1.封装对象方法的插件:大部分插件都是封装对象的插件 2.封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquer ...
idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例，取不到页面上的值
在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...
编写高效的jQuery代码
编写高效的jQuery代码最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascri ...
玛塔机器人函数_玛塔学员世界机器人大赛首秀：能编写超50道指令，创意海洋保护方案超惊艳！...
原标题:玛塔学员世界机器人大赛首秀:能编写超50道指令,创意海洋保护方案超惊艳! 前段时间,一则关于AI技术的"乌龙"让人忍俊不禁. 在一场足球赛中,虽然具有AI追踪技术的摄像头被 ...
解密jQuery事件核心 - 绑定设计（一）
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
jQuery unbind 删除绑定事件 / 移除标签方法
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用b ...
jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

angularJS使用编写KindEditor,UEidtor,jQuery指令，双重绑定

angularJS使用编写KindEditor,UEidtor,jQuery指令，双重绑定相关推荐

最新文章

热门文章