CODEWITHSUNDEEP
angularjsangularjs-directive
Hank
Hank

Reputation: 2616

How to set elements positions top and left in ng-repeat directive after angular model gets refreshed

I'm generating a bunch of tags via angularjs ng-repeat these need to be arranged in a circular fashion by manipulating their top and left style settings.

This is what I have so far, which positions them correctly on loading the page, but when the model is refreshed it loses the positioning:

Someone suggested to do this in a ng-repeat directive but I'm not sure how, how can I accomplish this?

<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>

angular controller:

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

Upvotes: 0

Views: 234

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Put the positioning function inside an $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.');
    });

This will give the ng-repeat directive time to add the new elements to the DOM.

Upvotes: 1

Related Questions