3

我一直在环顾四周，并不太能够找到完成以下任务的“角度”方式的清晰路径。我想要实现的是在将鼠标悬停在 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 不是同步的，因此在显示工具提示后发生绑定。如果我将鼠标悬停在另一个链接上，我会看到前面的信息，因为正如我提到的，绑定以异步方式发生，即调用 scope.$emit('onCurrentDocChange') 并不意味着父作用域在下一次绑定时绑定调用显示工具提示的行。我不得不想象这种模式必须经常出现在那里。一个作用域做了一些应该触发页面其他部分的绑定的事情，不一定在同一个作用域内。有人可以先验证我将数据从一个范围发送到另一个范围的方式是否有效？此外，我们如何等到某些东西被“绑定”后再影响视图。如果我让控制器与视图混合，这会更容易，但这是不正确的。所以，我需要控制器将数据绑定到范围，然后我需要视图为包含数据的元素“显示工具提示”。注释？m 将数据从一个范围发送到另一个范围是否有效？此外，我们如何等到某些东西被“绑定”后再影响视图。如果我让控制器与视图混合，这会更容易，但这是不正确的。所以，我需要控制器将数据绑定到范围，然后我需要视图为包含数据的元素“显示工具提示”。注释？m 将数据从一个范围发送到另一个范围是否有效？此外，我们如何等到某些东西被“绑定”后再影响视图。如果我让控制器与视图混合，这会更容易，但这是不正确的。所以，我需要控制器将数据绑定到范围，然后我需要视图为包含数据的元素“显示工具提示”。注释？

4

1 回答 1

5

要正确地以角度方式启动您的指令，例如：

...
    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/链接开始使用 angular-way UI。查看 bootstrap-ui 模块 - 作为指令实现的纯角度引导小部件。您可以了解如何直接从模块的源代码实现工具提示绑定 - https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

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

    <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 文档以编写指令示例，并与 Angular 一起度过愉快的编码时光！

于 2013-09-06T22:06:41.333 回答