javascript - 将数据从 jQuery 发送到 AngularJS 的 Controller

Question

我想将 jQuery 生成的数据传递给 AngularJS 的 Controller 。有什么办法可以做到这一点。

 <textarea  ng-click="showSelectedText(selection.text)" name="editor1" id="editor1" cols="118" rows="35">

jQuery 收集数据:

  $( "#editor1" ).select(function() {

                var selection = getSelected()
                if(selection)
                {

                    alert(selection);
                }

                });  

                function getSelected() {
                    if (window.getSelection) {
                        return window.getSelection();
                    }
                    else if (document.getSelection) {
                        return document.getSelection();
                    }
                    else {
                        var selection = document.selection && document.selection.createRange();
                        if (selection.text) {
                            return selection.text;
                        }
                        return false;
                    }
                    return false;
            }  

AngularJS 的 Controller :

 $scope.showSelectedText = function(fromUI) {

        alert("Text is : "+ fromUI);
    };

Answer 1

您需要做一些更改。就像给你定义 Controller 的元素一个 id，比如

<div id="demoElement" ng-app='MyModule' ng-controller="MyController">
</div>

在您的 Controller 中保持此功能不变。即

$scope.showSelectedText = function(fromUI) {

        alert("Text is : "+ fromUI);
    };

现在您可以从文本区域中删除 ng-click="showSelectedText(selection.text)"并使用以下行从您的 jquery 代码中调用 angular 的函数。

angular.element(document.getElementById('demoElement')).scope().showSelectedText(jQueryObjectOfSelectedText);

您可以从获取所选文本的 jQuery 代码中调用此函数，例如

  $( "#editor1" ).select(function() {

                    var selection = getSelected()
                    if(selection)
                    {
 angular.element(document.getElementById('demoElement')).scope().showSelectedText(selection);
                    }

                    });  

                    function getSelected() {
                        if (window.getSelection) {
                            return window.getSelection();
                        }
                        else if (document.getSelection) {
                            return document.getSelection();
                        }
                        else {
                            var selection = document.selection && document.selection.createRange();
                            if (selection.text) {
                                return selection.text;
                            }
                            return false;
                        }
                        return false;
                }