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

Question

我是AngularJS的初学者 - 几乎是几天。

作为第一个项目，我试图建立一个集成Wiris的简单Angular项目。

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

我尝试使用以下方法：

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

我尝试了这些{{1}}个句子中的每一个都没有成功，但有些事情告诉我我的一般方法是错误的。

我想知道是否有人可以提供有关如何正确整合Wiris和AngularJS2的指示，以便我可以检索创建的公式？

Answer 1

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

$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>元素。

错误

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

有关更多信息，请参见

AngularJS Wiris集成

3 个答案:

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

AngularJS Wiris集成

3 个答案:

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

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