从 AngularJS 中的指令回调函数更改模型不起作用

Changing a model from a directive callback function in AngularJS has no effect

本文关键字：模型 不起作用 函数 回调 AngularJS 指令      更新时间：2023-09-26

所以，我想要的是一个自定义指令，它将读取并清除当前选择，然后将所选文本传递给回调函数。这有效，但是无论我在该回调函数中做什么，都对作用域没有影响，这让我相信有多个作用域，它们以某种方式相互冲突。

首先，我定义了这样的指令：

angular.module('app').directive('onTextSelected', ['$window', function ($window) {
    return {
        restrict: 'A',
        scope: {selectFn: '&'},
        link: function (scope, element, attrs) {
            $(element).mouseup(function () {
                var selection = $window.getSelection().toString();
                if ($window.getSelection().removeAllRanges) {
                    $window.getSelection().removeAllRanges();
                } else if ($window.getSelection().empty) {
                    $window.getSelection().empty();
                }
                if (selection && selection.trim() !== "") {
                    scope.selectFn({
                        text: selection.trim()
                    });
                }
            });
        }
    };
}]);

它在模板中的用法如下：

<pre ng-bind-html="message" id="messagePre" on-text-selected
    select-fn="textSelected(text)"></pre>

这是回调函数：

$scope.textSelected = function (text) {
    console.log(text);
    $scope.currentText = text;
};

我有一个使用 $scope.textSelected 作为模型的文本框，使用另一个函数的相同代码设置它可以正常工作，但在这种情况下它就是不行。尽管所有代码都被执行（例如，它在控制台上打印），但没有任何反应。

调用后工作

$scope.$digest()

或使用

$scope.$apply()

可能与这里jQuery的使用有关。

相关文章：