Performance of scope.$watch

[dunksmith]

Using scope.$watch without passing an expression very inefficent, since it fires on any scope change (whether relevent to the plugin or not). Profiling in Chrome showed that this was causing dotdotdot to eat up CPU time.

Maybe you could at least mention this in the readme to avoid people getting caught out?

Here's my workaround - not great as the scope variable is hardcoded, but hopefully you get the general idea.

app.directive('dotdotdot', ['$timeout', function($timeout){
    return {
        restrict: 'A',
        scope: true,    // Pass scope in
        link: function(scope, element, attributes) {

            // Hardcode watch expression (must be a better way??)
            scope.$watch('scopeVarThatAffectsSize', function() {

                // Wait for element to render - 400 appears to be a good number from testing
                $timeout(function() {
                    // Don't use { watch: true } here as it polls continuously
                    element.dotdotdot();
                }, 400);
            });
        }
    }
}]);

[ecollis6]

I completely agree with this. I just implemented this in a current project with the following modifications:

Passed my ng-model (from my input) into "content" attribute:

scope: {
    content: '='
}

Set watch on "content":

scope.$watch('content', function() {
    ...
});

Set debounce effect on my input to increase performance:

<input ng-model="vm.InputValue" ng-model-options="{debounce: {'default': 100}}"/>

Here is the directive being used:

<div dotdotdot content="vm.InputValue"/>