我试图将美丽的所见即所得Redactor(
http://imperavi.com/redactor/)整合到一个定制的AngularJS指令中.
Visualy它的工作,但我的自定义指令是不兼容的ng模型(我不明白为什么)
这是你如何使用我的指令:
- <wysiwyg ng-model="edited.comment" id="contactEditCom" content="{{content}}" required></wysiwyg>
这是指令码:
- var myApp = angular.module('myApp',[]);
- myApp.directive("wysiwyg",function(){
- var linkFn = function(scope,el,attr,ngModel) {
- scope.redactor = null;
- scope.$watch('content',function(val) {
- if (val !== "")
- {
- scope.redactor = $("#" + attr.id).redactor({
- focus : false,callback: function(o) {
- o.setCode(val);
- $("#" + attr.id).keydown(function(){
- scope.$apply(read);
- });
- }
- });
- }
- });
- function read() {
- var content = scope.redactor.getCode();
- console.log(content);
- if (ngModel.viewValue != content)
- {
- ngModel.$setViewValue(content);
- console.log(ngModel);
- }
- }
- };
- return {
- require: 'ngModel',link: linkFn,restrict: 'E',scope: {
- content: '@'
- },transclude: true
- };
- });
最后这是小提琴 – > http://fiddle.jshell.net/MyBoon/STLW5/
我根据Angular-UI的TinyMCE指令做了一个.这个也听格式按钮点击.当模型在指令之外更改时,它也处理这种情况.
directive.coffee(对不起,为coffeescript)
- angular.module("ui.directives").directive "uiRedactor",["ui.config",(uiConfig) ->
- require: "ngModel"
- link: (scope,elm,attrs,ngModelCtrl) ->
- redactor = null
- getVal = -> redactor?.getCode()
- apply = ->
- ngModelCtrl.$pristine = false
- scope.$apply()
- options =
- execCommandCallback: apply
- keydownCallback: apply
- keyupCallback: apply
- scope.$watch getVal,(newVal) ->
- ngModelCtrl.$setViewValue newVal unless ngModelCtrl.$pristine
- #watch external model change
- ngModelCtrl.$render = ->
- redactor?.setCode(ngModelCtrl.$viewValue or '')
- expression = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {}
- angular.extend options,expression
- setTimeout ->
- redactor = elm.redactor options
- ]
HTML
- <textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>