Question

好的我要做的是计算一个元素内的字符数，但该元素包含绑定（例如{{data.username}}），我希望在之后获得字符串长度 strong>绑定发生。

到目前为止，我的想法是创建一个属性指令，只是.text().length传递给“链接”函数的元素 - 见下文：

到目前为止，这是我的工作：

<!DOCTYPE html> <html ng-app="app"> <head> <title>Counting Characters</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script> </head> <body ng-controller="TestCtrl"> <div count-chars>{{person.firstName}} {{person.lastName}}</div> <script> var app = angular.module('app', []); app.controller('TestCtrl', function ($scope) { $scope.person = { firstName: "James", lastName: "Smith" }; }); app.directive('countChars', [function(){ return { link: function(scope, elem, attrs) { console.log(elem.text()); console.log(elem.text().length); } }; }]); </script> </body> </html>

问题是这只会在任何绑定发生之前返回字符串（此时通过console.logs）。我想要的是James Smith和11字符，但我得到的是{{person.firstName}} {{person.lastName}}和40字符。

有什么想法吗？

Answer 1

您可以做的最简单的事情是将代码包装到$timeout服务中，因此它将在下一个摘要循环中执行，这意味着所有插值作业将在那时完成：

app.directive('countChars', ['$timeout', function($timeout) {
    return {
        link: function(scope, elem, attrs) {
            $timeout(function() {
                console.log(elem.text());
                console.log(elem.text().length);
            });
        }
    };
}]);

演示：http://plnkr.co/edit/4vkQoTPmx0gL3hOUpN0n?p=preview

Answer 2

在您的指令中，您可以在elem.text().length的{{1}}内计算$watch吗？

Answer 3

在编译期间无法获取插值字符串，因为您只是稍后在控制器中指定值。因此，您需要注意更改：

compile: function (element) {
    var text = $interpolate(element.text());

    return function link ($scope) {
        $scope.$watch(text, function (interpolatedText) {
            // measure and log (or do whatever with) your interpolated text
            // (the code you put here will run whenever the text changes)
        });
    };
}

（我已经在 compile 阶段检索了原始文本，因此即使已经分配了范围上的属性，它也能正常工作。）

使用AngularJS绑定后如何获取元素的字符串长度？

3 个答案:

演示：http://plnkr.co/edit/4vkQoTPmx0gL3hOUpN0n?p=preview