时间戳

首页 > 解决方案 > 角度模型刷新后如何在ng-repeat指令中设置元素位置的顶部和左侧

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

问题描述

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);
    });
}

标签： angularjsangularjs-directive

解决方案

将定位函数放在$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。

推荐阅读