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屋！