AngularJS Wiris集成

Question

我是AngularJS的初学者。作为第一个项目，我试图建立一个简单的角度项目，它集成了威利斯。

​

​

实际上，看到插件并与其交互是我进步的程度。当我试图获取文本区域中的数据时，我的问题就开始了。

我尝试使用以下方法：

<div ng-model="questionData" id="editorContainer"
     style='width:100%; height:500px;'>
  Responsible!
</div>
<input type="button" value="Submit" ng-click="postQuestion()" />

headlessQS.controller('wirisController', ['$scope', '$route', '$routeParams', function($scope, $route, $routeParams){

    $scope.postQuestion = function(){
//        console.log($scope.questionData.wrs_previewImage);
//        console.log( angular.element('#editorContainer').val() );
//        console.log( $('#editorContainer').val() );
//        console.log(angular.element('[id="username"]').val());
//        console.log(angular.element('#editorContainer').html);

        console.log( angular.element('#editorContainer').val() );
        console.log( angular.element('#editorContainer')[0].value );
    }
}]);

我尝试了所有这些console.log语句，但都失败了，但有些地方告诉我，我的一般方法是错误的。

我希望将Wiris与AngularJS2集成起来，这样我就可以检索创建的公式。我怎么能这么做？

Answer 1

访问MathML标记的方法是通过getMathML() Wiris函数调用，如下所示：

$scope.postQuestion = function(){
    console.log( editor.getMathML() );
}

Answer 2

使用AngularJS，我们建议您使用WIRIS作为TinyMCE的外部插件。您可以在http://www.wiris.com/plugins/docs/resources/external-plugin上找到更多详细信息。

Answer 3

ng-model指令不适用于<div>元素。

错误

更好

<textarea ng-model="questionData" id="editorContainer"
     style='width:100%; height:500px;'>
  Responsible!
</textarea>

ng-model与<div>元素的集成

若要将ng-model与<div>元素集成，请定义与ng模型控制器一起工作的自定义指令：

<div ng-model="questionData" my-editor>
    Responsible!
</div>

app.directive("myEditor", function() {
    return {
        require: "ngModel",
        link: postLink
    };
    function postLink(scope, elem, attrs, ctrl) {
        elem.on("keyup", function(ev) {
            var keycode = ev.keyCode;
            //...
            ctrl.$setViewValue(data);
        });
        ctrl.$render = function() {
            var something = $ctrl.$viewValue;
            //...
            elem.html(something);
        };
        ctrl.$parsers.push(function(data) {
            //...
            return data;
        });
        ctrl.$formatters.push(function(data) {
            //...
            return data;
        });            
    }
})

有关详细信息，请参阅

• )
• AngularJS ngModelController API引用
• AngularJS ngModelController API引用-自定义控件示例