Angular JS Directive - Template, compile or link?
angularjs, angularjs-directive, javascript
Solution
First of all you can change the filter that it wouldn't alter string if it doesn't need to
Second, since you only need filter and popover - template is enough.
angular.module('myapp.directives', [])
.directive('myappShorten', function () {
return {
scope: { data : '=myappShorten',
template:"<div popover='{{data.Description}}' popover-trigger='mouseenter'>" +
"{{ data.Description | cut:true:20:' ...' }}</div>"
}
})
Alternatively you can use combination of `ng-show` and `ng-hide`
app.directive('shorten', function () {
return {
restrict: 'A'
, scope : {
shorten : '=',
thestring: '='
}
, template: "<div ng-show='sCtrl.isLong()' tooltip='{{ sCtrl.str }}'>{{ sCtrl.short() }}</div>"+
"<div ng-hide='sCtrl.isLong()'>{{ sCtrl.str }}</div>"
, controllerAs: 'sCtrl'
, controller: function ($scope) {
this.str = $scope.shorten || ''
this.length = $scope.thestring || 20
this.isLong = function() {
return this.str.length > this.length
}
this.short = function() {
if ( this.str.length > this.length) {
return this.str.substring(0,this.length) + '...'
}
}
}
}
})
Third option would be to actually use compile and $watch on myappShrten.Description but it seems to be overkill to me.
Problem
I would like to create an Angular JS directive to check the length of a string, if it is too long to shorten it using a Filter, and show an Angular-UI popover on mouseover. Where in the directive should I be placing the functionality to get this to work (link, template or compile)? The view: ``` <div myapp-shorten="project">{{project.Description}}</div> ``` Here are my first attempts at the directive so far: ``` angular.module('myapp.directives', []) .directive('myappShorten', function () { function link(scope, element, attrs) { var outputText = ""; if (myappShorten.Description.length > 20) { outputText += "<div popover='{{myappShorten.Description}}' popover-trigger='mouseenter'>" + "{{myappShorten.Description | cut:true:20:' ...'}}</div>"; } else { outputText += "<div>{{myappShorten.Description}}</div>"; } element.text(outputText); } return { link: link, scope: { myappShorten: "=" } }; }); ```