8

我正在使用 ng-if 来显示和隐藏一个元素。当元素出现时，我想调用一个服务，它在新元素中滚动到某个子元素（按 Id）。问题是，如果我尝试在将元素设置为可见后立即调用我的服务函数，则 DOM 似乎还没有准备好。

var myApp = angular.module('myApp',[]);

myApp.factory("ScrollService", function () {
    return {
        scroll: function (id) {
            console.log(document.getElementById(id));
        }
    };
});

function MyCtrl($scope, ScrollService) {
    $scope.visible = false;

    $scope.toggleVisibility = function () {
        $scope.visible = !$scope.visible;
        if ($scope.visible) {
            ScrollService.scroll("myId"); //output: null
        }
    };
}

document.getElementById()总是会导致null.

这也是一个小提琴，它演示了这个问题：http: //jsfiddle.net/Dpuq2/

那么有什么方法可以在被 ng-if 操作后在 DOM 准备好后立即触发函数？

编辑

使用 MinkoGechev 的小提琴，我能够在更现实的环境中重现我的错误，并使用指令而不是服务：FIDDLE

问题似乎出现了，因为我在-containerng-repeat内部使用ng-if：

<div ng-controller="MyCtrl">
    <div ng-if="visible"> 
        <div id="myId" data-scroll="itemId">
            <div id="xy"></div>
            <div ng-repeat="item in items" id="{{ item.number }}">{{ item.number }}</div>
        </div>
    </div>
    <button ng-click="toggleVisibility()">toggle</button>
</div>

这是相应的指令加上控制器：

var myApp = angular.module('myApp',[]);

myApp.directive("scroll", function () {
    return {
        scope: {
            scroll: '='
        },
        link: function (scope) {
            scope.$watch('scroll', function (v) {
                console.log(v, document.getElementById(scope.scroll));
            });
        },
        transclude: true,
        template: "<div ng-transclude></div>"
    };
});

function MyCtrl($scope) {
    $scope.visible = false;
    $scope.itemId = "";
    $scope.items = [];
    for (var i = 1; i < 10; i++) {
        $scope.items.push({
            number: i,
            text: "content " + i
        });
    }

    $scope.toggleVisibility = function () {
        $scope.visible = !$scope.visible;
        if ($scope.visible) {
            $scope.itemId = "3";
        }
    };
}

因此，一旦我切换容器的可见性，我就会设置要滚动到的元素的 Id：

$scope.itemId = "3"

如果我使用从 1 到 10 的数字之一（由 ng-repeat 创建的元素的 ID），它将失败。如果我使用“xy”（位于 ng-repeat 元素旁边的一个元素的 ID），它会成功。

4

2 回答 2

2

以下是如何使用指令实现您正在寻找的效果：

var myApp = angular.module('myApp',[]);

myApp.directive("scroll", function () {
    return {
        scope: {
            scroll: '='
        },
        link: function (scope) {
            scope.$watch('scroll', function (v) {
                //The value is true, so the element is visible
                console.log(v, document.getElementById('myId'));
            });
        }
    };
});

function MyCtrl($scope) {
    $scope.visible = false;

    $scope.toggleVisibility = function () {
        $scope.visible = !$scope.visible;
    };
}

这是DEMO（打开控制台查看日志）。

注意：AngularJS 强制分离关注点，这导致代码更具可读性和可维护性。使用“Angular 方式”时应遵循的规则之一是将所有 DOM 操作仅放在指令中。

于 2013-11-03T21:38:57.280 回答
1

你找到解决问题的方法了吗？

既然您提到问题似乎与 ng-repeat 有关，您是否尝试过“scope.$last”？

我绝不是一个经验丰富的网络开发人员，但我有一个类似的问题，工具提示不会显示在由 ng-repeat “生成”的项目上，并让它与使用“scope.$”应用工具提示的指令一起工作最后的”

举个例子：

AppName.directive('directiveName', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            <-- Your code here -->
        }
    };
});

也许有更多经验的人可以提供更多输入。

于 2014-06-18T14:25:01.683 回答