javascript - 在 AngularJS 中表中添加的行上显示弹出窗口 3 秒

Question

我想要做什么:我有一个由 ngRepeat 绑定(bind)到 AngularJs Controller 中的集合的表。当我在 Controller 中通过 collection.unshift(newItem) 添加项目时，我希望在新添加的行的第一列上显示一个弹出窗口。

我如何尝试实现这一目标:

 <table> 
      <tr ng-repeat="item in items">
         <td>
           <a popover-on-show>{{item.Name}}</a>
         </td>
       </tr>
 </table>

和指令:

.directive('popoverOnShow', function ($timeout) {
        return {
            restrict:"A",
            link: function (scope, element, attrs) {
                element.popover({
                    trigger: "manual",
                    html: true,
                    content: "This is a new added item",
                    placement: "right"
                }).popover('show');
                $timeout(function () { element.popover('hide'); }, 1000);
            }
        }
    });

问题是，当我在 Controller 中执行 init 操作时: $scope.items = Resource.query(); 弹出窗口在所有项目上显示一秒钟，我如何告诉指令在初始加载时不显示弹出窗口？

Answer 1

如果您在链接函数期间调用 show，它将在指令链接时显示。我建议使用 watch 在运行时显示弹出窗口。

类似于:

scope.$watch('items', function(newValue, oldValue) {
    // Do nothing during initial run
    if (newValue != oldValue){
        if (<isLastElement>){
            <showPopover>
        }
    }
};