在 AngularJS 表中添加的行上显示 3 秒的弹出框答案

【问题标题】：Show an popover for 3 second on added row in table in AngularJS在 AngularJS 表中添加的行上显示 3 秒的弹出框
【发布时间】：2015-03-12 03:14:50
【问题描述】：

我想要做什么：我有一个由 ngRepeat 绑定到来自 angularJs 中控制器的集合的表。当我在控制器中通过 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);
            }
        }
    });

问题是，当我在控制器中初始化时： $scope.items = resource.query(); 弹出框显示在所有项目上一秒钟，我如何告诉指令在初始加载时不显示弹出框？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

如果您在链接功能期间调用 show，它将在指令链接时显示。我建议在运行时使用手表显示弹出框。

类似：

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

【讨论】：

我试图在 item 和 items 的链接函数中添加这个 $watch，但在这两种情况下我都得到了 newValue==添加新项目时的 oldValue。所以它永远不会进入区块。

【解决方案2】：

我解决了，但对我来说似乎完全错误，所以我希望有更好的解决方案。我所做的是在控制器中设置一个 initializing 属性并在指令中检查它。

来自控制器的片段：

$scope.refresh = function () {
    $scope.initializing = true;
    $scope.projects = null;
    someResource.query().$promise.then(function (result) {
        $scope.projects = result;
        $timeout(function () { $scope.initializing = false; });
    });
}

指令：

  .directive('popoverOnShow', function ($timeout) {
        return {
            restrict:"A",
            link: function (scope, element, attrs) {
                if (!scope.$parent.$parent.initializing && scope.$first) {
                    element.popover({
                        trigger: "manual",
                        html: true,
                        content: "<div>Just added this item</div>",
                        placement: "right"
                    });
                    $timeout(function () { element.popover('show'); });
                    $timeout(function () { element.popover('hide'); }, 3000);
                }
            }
        }
    });

【讨论】：