Question

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

我应该在指令中放置使其工作的功能（链接，模板或编译）？

观点：

<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，但这似乎对我来说太过分了。

Answer 2

以上接受的答案正常。但是如果thestring的值发生更改，则不会在控制器首次运行时编译时更新，如果值更改则不会更新。将代码放入controller预先编译，但将代码放在link函数中允许它在值更改时更新。这是我上述解决方案的首选解决方案：

观点：

<shorten thestring="project.Description" thelength="40"></shorten>

指令：

.directive('shorten', function () {
    return {
        restrict: 'E'
        , scope: {
            thelength: '=',
            thestring: '='
        }
        , link: function postLink(scope, iElement, iAttrs) {
            scope.isLong = function () {
                return scope.thestring.length > scope.thelength
            }

            scope.short = function () {
                if (scope.thestring.length > scope.thelength) {
                    return scope.thestring.substring(0, scope.thelength) + '...'
                }
            }

        }

        , template: "<div class='handCursor' ng-show='isLong()' tooltip='{{ thestring }}'>{{ short() }}</div>" +
                    "<div ng-hide='isLong()'>{{ thestring }}</div>"
    }
});

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

2 个答案: