AngularJS工厂在外部js上调用new

时间:2014-02-17 16:03:21

标签: javascript angularjs service factory

我在我的项目中使用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方式吗?

1 个答案:

答案 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>