AngularJs应用程序没有显示uib工具提示

Question

我试图用角js实现，当在li省略号中显示工具提示时，我的代码如下

依赖注入：

angular.module('spt', ['ui.router', 'ngStorage', 'ngAnimate', 'ui.bootstrap', 'ui.slimscroll', 'angular-google-analytics', 'jmdobry.angular-cache',
    'stpa.morris', 'angularReverseGeocode', 'chart.js', 'ui.calendar', 'ui.date',
    'me-lazyload', 'angularUtils.directives.dirPagination', 'angular-loading-bar', 'base64',
    'nemLogging', 'ui-leaflet', 'angular-google-adsense', 'dropstore-ng', 'ngVideo', 'angular-google-adsense', 'cgBusy', 'duScroll', 'angularGrid', 'infinite-scroll'
]);

在HTML中：

<p class="contactEmail">
<ul style="max-width: 200px;">
<li uib-tooltip="{{email}}" tooltip-enable="flag" show-tooltip-on-text-overflow="flag" style="overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;">
<i class="ion-email"></i> 
Email : {{email}}
</li>
</ul>
</p>

联署材料：

angular.module('spt').directive('showTooltipOnTextOverflow',
    function ($timeout) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
      var el = element[0];
      scope.$watch(function(){
        return el.scrollWidth;
      }, function() {
        var el = element[0];
        if (el.offsetWidth < el.scrollWidth) {
          //console.log('ellipsis is active for element', element);
          attrs.tooltipEnable = "true";
        } else {
          //console.log('ellipsis is NOT active for element', element);
        }
      });
    }
      };
    });

主计长：

function ContactController(
    $scope,
    $rootScope,
    $modal,
    $log,
    $sce,
    ContactService,
    Utility,
    SettingsService,
    Session,
    APPLICATION,
    RESPONSE,
    CONSTANTS) {
    $log.debug('in ContactController');
    //function Declaration
    $scope.closeModelInstance = closeModelInstance;
    $scope.showDropdown = showDropdown;
    $scope.selectItem = selectItem;
    $scope.showBlock = false;
    $scope.showBlockMessage = false;
    $scope.blockMessage = '';
    $scope.syncContacts = syncContacts;

    $scope.flag = true;
    $scope.email = "sdajkdsjsadklsdajkasldjsdakljsadklsdadsa@adsjsdsadkjadsjk.it";
    if (Utility.redirectToDashboard(Session.getValue(APPLICATION.currentDeviceId)) === true) {
      return true;
    }
    $rootScope.isChildSelected1 =  Session.getValue('isChild');
    var params = {};
    params.id = Session.getValue(APPLICATION.currentDeviceId);
    $log.debug('contacts');
    $scope.items = {};
    $scope.blockType = {
      message: false,
      Contacts: false
    };

Answer 1

您不能使用静态属性来做到这一点！使用范围内的变量。

$scope.myVar = false;

<p class="contactEmail">
    <ul>
        <li uib-tooltip="{{item.email}}" 
            tooltip-enable="myVar" 
            show-tooltip-on-text-overflow="myVar">
            <i class="ion-email"></i> Email : {{item.email}}
        </li>
    </ul>
</p>

JS

angular.module('spt').directive('showTooltipOnTextOverflow', function () {
    return {
        restrict: 'A',
        scope: {
           showTooltipOnTextOverflow: "="  
        },
        link: function(scope, element, attrs) {
            var el = element[0];
            scope.$watch(function(){
                 return el.scrollWidth;
            }, function() {
                 var el = element[0];
                 if (el.offsetWidth < el.scrollWidth) {
                    scope.showTooltipOnTextOverflow = true;
                 }
                 else {
                     scope.showTooltipOnTextOverflow = false;
                 }
            });
        }
     };
});

工作小提琴==> http://plnkr.co/edit/EGHPncgOVvubU9iBlJdx?p=preview