我在我的项目中使用AceEditor JavaScript库。我想通过Angular服务使用它,而不是通过调用new
来使用它。
而不是在我的控制器内:
$scope.ace = new AceEditor('my-editor-div');
我为服务创建了一个工厂:
myapp.factory('AceService', function() {
this.init=function(name) {
return new AceEditor(name);
};
return this;
});
我在控制器中调用的是这样的:
$scope.ace = AceEditorService.init('my-editor-div');
我这样做是正确的Angular方式吗?
答案 0 :(得分:0)
您可以使用第三方指令,例如http://angular-ui.github.io/ui-ace/
或者您可以轻松地使用角度指令包装Ace编辑器,如下所示:
YOUR_MODULE.directive("ace",[function() {
return {
restrict : 'EA',
require : '?ngModel',
replace:true,
template:"<div></div>",
scope:{
},
link : function(scope, elem, attrs, ngModel) {
if(!ngModel)
return;
//bind ace editor to editor attribute
scope.$watch('ace', function() {
if(attrs.editor)
scope.$eval('$parent.'+attrs.editor + ' = ace');
});
var html = elem.html();
var editor = ace.edit(elem[0]);
//some default settings
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode(attrs.mode ? "ace/mode/"+attrs.mode : "ace/mode/javascript");
attrs.$observe("mode",function(v){
if(v){
editor.getSession().setMode("ace/mode/"+attrs.mode);
}
});
editor.resize();
editor.setValue(html);
editor.clearSelection();
editor.moveCursorTo(0, 0);
scope.ace = editor;
//specify how UI should be updated
ngModel.$render = function() {
editor.setValue(ngModel.$viewValue);
};
function valid(editor) {
return (Object.keys(editor.getSession()
.getAnnotations()).length == 0);
}
editor.on('change', function() {
ngModel.$setViewValue(editor.getValue());
});
}
};
}]);
然后在你的html中调用它:
<ace ng-model="some_value" mode="xml"></ace>