Question

我一直在环顾四周，并没有能够通过“棱角分明”的方式来完成以下任务。我想要实现的是当将鼠标悬停在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>

在模块中，我声明了我的指令，并在指令范围内声明了我的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();
    });
}

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

Answer 1

以正确的角度方式启动指令，如：

...
    directive('showonhover',function() {
          return {
             link : function(scope, element, attrs) {
                element.parent().bind('mouseenter', function() {
                    element.show();
                });
                element.parent().bind('mouseleave', function() {
                     element.hide();
                });
           }
...

或者从http://angular-ui.github.io/链接开始转到角度方式用户界面。查看bootstrap-ui模块 - 作为指令实现的纯角度引导程序小部件。您可以直接从模块的来源获得工具提示绑定的线索 - https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

另外还有一个例子 - （包含jQuery和bootstrap脚本） - 使用ui-utils模块Jquery passthrough指令ui-jq'。它允许将Jquery插件（$ .fn的样式）直接绑定为angular指令。这是他们绑定twitter bootstrap工具提示的示例。

    <a title="Easiest. Binding. Ever!" ui-jq="tooltip">
Hover over me for static Tooltip</a>

    <a data-original-title="{{tooltip}}" ui-jq="tooltip">Fill the input for a dynamic Tooltip:</a>
    <input type="text" ng-model="tooltip" placeholder="Tooltip Content">


<script>
    myModule.value('uiJqConfig', {
        // The Tooltip namespace
        tooltip: {
             // Tooltip options. This object will be used as the defaults
            placement: 'right'
        }
    });
</script>

另请参阅编写指令示例的官方角度文档，和Angular有一个愉快的编码时间！

什么是显示工具提示/灯箱的“角度”方式？

1 个答案: