diff --git a/README.md b/README.md index f219249..ea061b8 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,15 @@ angular-dotdotot ================ Angular directive for applying the dotdotdot jquery plugin- http://dotdotdot.frebsite.nl/ + +Usage: +------ +Include the directive in your app (see js/angular-dotdotdot.js). + +Then in your controller: + + $scope.myText = 'some really long text'; + +Template: + +
{{myText}}
diff --git a/js/angular-dotdotdot.js b/js/angular-dotdotdot.js index 821cd9f..e896111 100644 --- a/js/angular-dotdotdot.js +++ b/js/angular-dotdotdot.js @@ -1,11 +1,18 @@ angular.module('dotdotdot-angular', []) - .directive('dotdotdot', function(){ - return { - restrict: 'A', - link: function(scope, element, attributes) { - scope.$watch(function() { - element.dotdotdot({watch: true}); - }); - } - } - }); + .directive('dotdotdot', ['$timeout', function($timeout) { + return { + restrict: 'A', + link: function(scope, element, attributes) { + + // We must pass in the scope binding, e.g. dotdotdot='myText' for scope.myText + scope.$watch(attributes.dotdotdot, function() { + + // Wait for DOM to render + // NB. Don't use { watch: true } option in dotdotdot as it needlessly polls + $timeout(function() { + element.dotdotdot(); + }, 400); + }); + } + } +}]);