Angular JS 指令 - 模板、编译或链接? [英] Angular JS Directive - Template, compile or link?
问题描述
我想创建一个 Angular JS 指令来检查字符串的长度,如果它太长而无法使用过滤器缩短它,并在鼠标悬停时显示一个 Angular-UI 弹出窗口.
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)?
视图:
<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: "="
}
};
});
推荐答案
首先你可以改变过滤器,如果不需要就不会改变字符串
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>"
}
})
或者,您可以结合使用 ng-show
和 ng-hide
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) + '...'
}
}
}
}
})
第三个选项是在 myappShrten.Description 上实际使用 compile 和 $watch ,但这对我来说似乎有点矫枉过正.
Third option would be to actually use compile and $watch on myappShrten.Description but it seems to be overkill to me.
这篇关于Angular JS 指令 - 模板、编译或链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!