小编atl*_*sgp的帖子

什么是显示工具提示/灯箱的"角度"方式?

我一直在环顾四周,并没有能够通过"角度"方式完成以下任务.我想要实现的是当将鼠标悬停在ng-repeat循环中的链接上时显示带有信息的工具提示.根据我的研究,我明白这是观点的一部分,所以我应该在指令中处理这个问题.所以,我创建了一个名为providertooltip的属性指令.html声明如下:

<table>
    <tr id="r1" ng-repeat="doc in providers">     
        <td>
            <a providertooltip href="#{{doc.Id}}" ng-mouseover="mouseOverDoc(doc)" ng-mouseleave="mouseLeave()">{{doc.FirstName}} {{doc.LastName}}</a> 
        </td>
    </tr>
</table
<div id="docViewer" style="display:hidden">
    <span>{{currentDoc.FirstName}} {{currentDoc.LastName}}</span>
</div>
Run Code Online (Sandbox Code Playgroud)

在模块中,我声明了我的指令,并在指令范围内声明了我的mouseOver和mouseLeave函数.我也'发出'一个事件,因为这个锚是页面控制器范围的子范围.在作为控制器传递给路由器的控制器功能(docTable)上,我监听事件.部分实施如下:

app.directive("providertooltip", function() { 
  return {    
    restrict : 'A',        
    link: function link(scope, element, attrs) {
        //hover handler
        scope.mouseOverDoc = function(doc){
            scope.currentDoc = doc;
            scope.$emit('onCurrentDocChange');
            element.attr('title',angular.element('#docViewer').html());                    
            element.tooltipster('show');

           //docViewer
        };
         scope.mouseLeave = function() {
            element.tooltipster('hide');
        }
    }  
}});

function docTable(docFactory, $scope, $filter, $routeParams) {

    $scope.$on('onCurrentDocChange',function(event){
        $scope.currentDoc = event.targetScope.currentDoc;
        event.stopPropagation();
    });
}
Run Code Online (Sandbox Code Playgroud)

好的,这是我的问题.所有的工作都按预期进行; 实际上,工具提示并没有真正起作用,所以如果有人知道一个很容易显示div数据的好工具提示库,请告诉我.但是,我真正感到困惑的是绑定.我已经能够通过设置标题(默认工具提示行为)来获得上面的工具提示,但我可以看到第一次悬停链接时绑定尚未发生.我假设onCurrentDocChange不是同步的,因此在显示工具提示后发生绑定.如果我将鼠标悬停在另一个链接上,我会看到之前的信息,因为正如我所提到的那样,绑定以异步方式发生,即调用范围.$ emit('onCurrentDocChange')并不意味着父范围在下一个时间内绑定调用行显示工具提示.我不得不想象这种模式必须经常出现在那里.一个作用域执行的操作应该触发页面的某些其他部分的绑定,而不一定在同一范围内.有人可以先验证我将数据从一个范围发送到另一个范围的方式是有效的吗?而且,在影响视图之前,我们如何等待某些东西"绑定".如果我让控制器与视图混合,这将更容易,但这是不正确的.因此,我需要控制器将数据绑定到作用域,然后我需要视图为具有数据的元素"显示工具提示".评论?m将数据从一个范围发送到另一个范围是有效的吗?而且,在影响视图之前,我们如何等待某些东西"绑定".如果我让控制器与视图混合,这将更容易,但这是不正确的.因此,我需要控制器将数据绑定到作用域,然后我需要视图为具有数据的元素"显示工具提示".评论?m将数据从一个范围发送到另一个范围是有效的吗?而且,在影响视图之前,我们如何等待某些东西"绑定".如果我让控制器与视图混合,这将更容易,但这是不正确的.因此,我需要控制器将数据绑定到作用域,然后我需要视图为具有数据的元素"显示工具提示".评论?

data-binding angularjs

3
推荐指数
1
解决办法
4764
查看次数

标签 统计

angularjs ×1

data-binding ×1