从AngularJS中的指令回调函数更改模型无效

时间:2016-07-06 09:32:57

标签: javascript angularjs angularjs-directive angularjs-scope

所以,我想要的是一个自定义指令,它将读取并清除当前选择,然后将所选文本传递给回调函数。这是有效的,但无论我在回调函数中做什么都没有影响范围,这让我相信有多个范围,这些范围在某种程度上是冲突的。

首先,我定义了一个这样的指令:

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作为模型的文本框,并且使用来自另一个函数的相同代码设置它可以正常工作,但在这种情况下它不会。没有任何事情发生,尽管所有代码都被执行(例如,它在控制台上打印)。

1 个答案:

答案 0 :(得分:0)

调用

后有效
$scope.$digest()

或使用

$scope.$apply()

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