AngularJS Attribute Directive. Not compile value

Question

I have Angular directive for attribute title.

.directive('titleDate', function () {
    return {
        restrict: 'A',
        scope: {
            datetime: '=titleDate'
        },

        link: function($scope, element) {
            element.attr('title','{{ '+$scope.datetime+' | amDateFormat: \'D MMMM HH:mm\' }}');             
        }
    }
});

Directive add title for component. But title return string expression like:

{{ 21.04.2014:15.20.22 | amDateFormat: 'D MMMM HH:mm' }}

So filter not apply. How compile this string or that i'm doing wrong?

jimmygchen · Accepted Answer · 2014-10-21 15:50:03Z

1

A better way to use filter in a directive is to inject $filter service:

$filter('amDateFormat')($scope.datetime, 'D MMMM HH:mm');

So your code would look like:

.directive('titleDate', ['$filter', function () {
    return {
        restrict: 'A',
        scope: {
            datetime: '=titleDate'
        },

        link: function($scope, element) {
            element.attr('title', $filter('amDateFormat')($scope.datetime, 'D MMMM HH:mm'));             
        }
    }]
});

answered Oct 21, 2014 at 15:50

jimmygchen

7954 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

silintzir · Accepted Answer · 2014-10-21 15:38:52Z

0

the date 21.04.2014:15.20.22 should be inside quotes in the expression like '21.04.2014:15.20.22'

answered Oct 21, 2014 at 15:38

silintzir

7921 gold badge6 silver badges14 bronze badges

2 Comments

Gopard Over a year ago

element.attr('title','{{ \''+$scope.datetime+'\' | amDateFormat: \'D MMMM HH:mm\' }}'); not help!

silintzir Over a year ago

I would guess that in the titleDate attribute of the directive you would want @ (one-way) binding just to get a value there (<div title-date="{{2 | currency}}"></div>) (I used the currency filter because i don't have moment library available) and then in the directive you should have elem.attr('title', $scope.datetime). it should then bind correct

Collectives™ on Stack Overflow

AngularJS Attribute Directive. Not compile value

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related