Angular系列-AngularJs1使用Ace编辑器

Ace编辑器

• Ace编辑器是一个嵌入web的代码编辑器，支持语法高亮，自动补全等功能，如果想在页面展示或编辑代码，使用该工具是很合适的。
• 参考项目地址：https://github.com/ajaxorg/ace

结合AngularJs1使用

• 目前已经有结合使用的项目了：Ui-ace
• 我仅做展示使用，所以参考该项目，写一个简单使用例子：

1. 嵌入web的指令

app.directive('uiAce',[function () {
    return {
        restrict : 'EA',
        require: '?ngModel',
        link: function ($scope,$element,$attributes,ngModel) {
            if (angular.isUndefined(window.ace)) {
                throw new Error('ui-ace need ace to work...');
            }
            var acee = window.ace.edit($element[0]);
            var session = acee.getSession();
            if(ngModel){
                ngModel.$formatters.push(function (value) {
                    if(angular.isUndefined(value) || value ==null){
                        return '';
                    }else {
                        return value;
                    }
                });
                ngModel.$render = function () {
                    var text = JSON.stringify(ngModel.$viewValue, null, '	');
                    session.setValue(text);
                };
            }
        }
    }
}]);

2. 页面使用

<ui-ace class="col-md-4" style="height: 400px;" ng-model="currentNamespace">
</ui-ace>

• 这里ng-model绑定的变量，只要变化，上面指令里会重新渲染编辑器的内容，实现代码展示的功能。

3. 使用时加入ace的库，加入相关内容，即可。