【问题标题】：AngularJS Wiris integrationAngularJS Wiris 集成
【发布时间】：2017-03-16 02:11:14
【问题描述】：

我是 AngularJS 的初学者。作为第一个项目，我正在尝试建立一个简单的 Angular 项目，它集成了Wiris。

实际上看到插件并与之交互是我进步的程度。当我尝试在 textarea 中获取数据时，我的问题就开始了。

我尝试使用以下方法：

<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 集成，以便检索创建的公式。我该怎么做？

【问题讨论】：

angular.element() 不提供像 jQuery 这样的选择器。
如果你还有这个demo，可以分享一下链接吗？我无法融入。

标签： angularjs integration mathml

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

错误

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

更好

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

将`ng-model` 与`<div>` 元素集成

要将ng-model 与<div> 元素集成，请定义一个与ng-model 控制器一起使用的自定义指令：

<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;
        });            
    }
})

有关详细信息，请参阅

【讨论】：

将ng-model 与&lt;div&gt; 元素集成

将`ng-model` 与`<div>` 元素集成