ckeditor+angularjs directive

var cmsPlus = angular.module(‘cmsPlus‘, []);

cmsPlus.directive(‘ckEditor‘, function() {
  return {
    require: ‘?ngModel‘,
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

      ck.on(‘instanceReady‘, function() {
        ck.setData(ngModel.$viewValue);
      });

      function updateModel() {
          scope.$apply(function() {
              ngModel.$setViewValue(ck.getData());
          });
      }

      ck.on(‘change‘, updateModel);
      ck.on(‘key‘, updateModel);
      ck.on(‘dataReady‘, updateModel);
      ck.on(‘paste‘, updateModel);
      ck.on(‘selectionChange‘, updateModel);

      ngModel.$render = function(value) {
        ck.setData(ngModel.$viewValue);
      };
    }
  };
});
时间: 2024-12-10 01:24:30

ckeditor+angularjs directive的相关文章

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

angularjs directive 实例 详解

前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的model,也可以理解成插件,只不过这种model是带html的,例如:php的分页函数. 一,angularjs directive的常用格式,以及参数说明 1,直接return phonecatDirectives = angular.module('phonecatDirectives', [])

AngularJS - Directive Restrictions

While it's cool to make a custom element like we did the the previous cast, it's actually more common to do things like create custom attributes. These attributes are going to add things like behaviors, and we can do so by using restrict "A". &q

Angularjs directive全面解读(1.4.5)

说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解,废话不多说,以下是Angularjs 指令的运用及源码实现解读. 学习Angularjs directive那么我们要带3个问题来学习: 1. 什么是angular 指令?2. 指令如何定义存储的?3. 指令如何编译运行的? 1.首先第一点解读什么是指令: At a high level, dire

angularJS Directive学习

Directive 指令 直接上实例 index.html <!doctype html> <html ng-app="drag"> <head> <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script> <script src="script.js"></script> <

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

angularJS directive中的controller和link function辨析

在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到view:你有一些directive,负责将user interaction和$scope behavious link起来.但是还有一样东西: a directive controller.这个directive controller子一个directive的context中定义,但是它又可以被in