Question

我正在通过angularjs ng-repeat生成一堆标签，这些标签需要通过操纵其顶部和左侧样式设置以循环方式排列。

到目前为止，这是我在加载页面时正确放置它们的位置，但是当刷新模型时，它将失去位置：

有人建议在ng-repeat directive中做到这一点，但我不确定如何实现该目标？

<script type="text/javascript" id="ModuleMenuModalInit">
    window.objectModel = @Html.Raw(Model);
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/AngularControllers/_ModuleLauncherController.js")"></script>
<div id="nukeModules" class="launcherDiv" ng-controller="ModuleLauncherController as mmvm" ng-init="mmvm.initializeController()">
    <div id="divCircle" style="background-color:pink;">
        <div id="middleBubble">
            <img class="iconLarge" />
            <p id="bubbleText">&nbsp;</p>
        </div>
        <a ng-repeat="module in mmvm.moduleMenus"
           id="lb_{{module.Prefix}}"
           data-primary="{{module.Name}}"
           data-secondary="{{module.Description}}"
           access-text="" module="{{module.Prefix}}"
           ng-class="{
                    launcherbutton: true,
                    not_active: module.AssociatedUserModule == null || (module.AssociatedUserModule != null && !module.AssociatedUserModule.Accessible)
                   }">
            <img alt="{{module.Prefix}}" src="{{module.ImagePath}}">
        </a>
    </div>
</div>

角度控制器：

var NucleiApp = angular.module('NucleiApp');
NucleiApp.controller('ModuleLauncherController', ['$scope', '$http', '$location', function ($scope, $http, $location) {

    var mmvm = this;

    mmvm.initializeController = function () {
        mmvm.moduleMenus = window.objectModel.modules;
        delete window.moduleMenuModel;
        RemoveModuleMenuModalInitScript();
    }

    function ReloadModuleMenus() {
        $http({
            method: 'GET',
            url: uriPrefix + '/ModuleMenu/RefreshModules'
        }).then(function (response) {
            mmvm.moduleMenus = response.data.moduleMenus;
            positionLauncherButtons();
        }, function (error) {
            alert("Unexpected error in _ModuleMenuController.js controller vm.LoadData");
            console.log(error, 'can not get data.');
        });
    }

    angular.element(document).ready(function () {
        positionLauncherButtons();
    });

    mmvm.refreshModuleMenus = function (displayMenu) {
        ReloadModuleMenus();
    }
}]);

function positionLauncherButtons() {
    //Arrange the icons in a circle centered in the div
    numItems = $("#divCircle a").length; //How many items are in the circle?
    start = 3.927; //the angle to put the first image at. a number between 0 and 2pi
    step = (2 * Math.PI) / numItems; //calculate the amount of space to put between the items.
    $("#divCircle a").each(function (index) {
        radius = ($("#divCircle").width() - $(this).width()) / 2;
        tmpTop = (($("#divCircle").height() / 2) + radius * Math.sin(start)) - ($(this).outerHeight() / 2);
        tmpLeft = (($("#divCircle").width() / 2) + radius * Math.cos(start)) - ($(this).outerWidth() / 2);
        start += step; 

        $(this).css("top", tmpTop);
        $(this).css("left", tmpLeft);
    });
}

Answer 1

将定位功能放在$applyAsync中：

function ReloadModuleMenus() {
    $http({
        method: 'GET',
        url: uriPrefix + '/ModuleMenu/RefreshModules'
    }).then(function (response) {
        mmvm.moduleMenus = response.data.moduleMenus;
        $scope.$applyAsync(function() {
          positionLauncherButtons();
        });
    }, function (error) {
        alert("Unexpected error in _ModuleMenuController.js controller vm.LoadData");
        console.log(error, 'can not get data.');
    });

这将使ng-repeat指令有时间将新元素添加到DOM。

刷新角度模型后，如何在ng-repeat指令中设置元素的顶部和左侧

1 个答案: