Question

我正在使用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操作后立即触发一个函数？

修改

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

问题似乎发生了，因为我在ng-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），它就会成功。

Answer 1

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

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操作 ONLY 置于指令内。

Answer 2

您是否找到了解决问题的方法？

既然你提到这个问题似乎与ng-repeat有关，你试过＆＃34;范围。$ last？＆＃34;

我绝不是一位经验丰富的网络开发人员，但我遇到过类似的问题，工具提示不会在项目上显示＆＃34;生成＆＃34;通过ng-repeat并使用一个使用＆＃34;范围来应用工具提示的指令。$ last＆＃34;

举个例子：

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

也许有经验丰富的人可以提供更多的意见。

angularJS：等待ng-if完成，以确保DOM准备就绪

2 个答案: