javascript - Angular JS 指令 - 模板、编译或链接？

Question

我想创建一个 Angular JS 指令来检查字符串的长度，如果它太长而无法使用过滤器缩短它，并在鼠标悬停时显示一个 Angular-UI 弹出窗口。

我应该在指令中的什么位置放置功能以使其正常工作(链接、模板或编译)？

View :

<div myapp-shorten="project">{{project.Description}}</div>

到目前为止，这是我对该指令的第一次尝试:

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: "="
        }
    };

});

Answer 1

首先，您可以更改过滤器，使其在不需要时不会更改字符串

其次，因为您只需要过滤器和弹出窗口 - 模板就足够了。

 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

 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，但这对我来说似乎有点矫枉过正。