current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have a jQuery UI dialog, and in this pop up I have a dynamic <select> with angular and Ajax request. My dialog shows up if I click on a button, but AngularJS script is played even if dialog isn't visible.

I stopped my script with a condition : if($("#MyDialog).dialog("isOpen") ===true)"

And it works, but I don't know how to "reload" my Angular Controller to load select input when my dialog is displayed...

I tried this : MyController(angular.element($('div[ng-controller="MyController"]')).scope(), angular.element($('div[ng-controller="MyController"]')).http);

but it doesn't works... Any idea ?

Code of my controller : 

function MyController($scope, $http) {
    if ($("#myDialog").dialog("isOpen") === true) {
        $http.
            success(function (data, status, headers, config) {
                $scope.select = data;
            }).
            error(function (data, status, headers, config) {
                alert("error !");
            });
    }
}
share|improve this question
    
That's an anti pattern in angular.js -> $("#myDialog") , This code should probably live inside a directive. please provide a plunker – Ilan Frumer Feb 17 '14 at 14:44
1  
There's no point to use AngularJS if you aren't trying to enforce the practices they strive to enforce. You shouldn't access DOM elements in the controller. – plalx Feb 17 '14 at 14:44
up vote 0 down vote accepted

Instead of accessing whether the modal is open try placing a ng-click on the open modal button or link.

<button ng-click="loadSelectData()">Open Modal</button>

<script>
    app.controller("MyController", ["$scope", "$http", function($scope, $http) {
        $scope.loadSelectData = function () {
            // fetch your select data
            // also you can check if you already have the data before going to server
        }
    }]);
</script>
share|improve this answer
    
I will use a jquery ui dialog controlled by angular, so my select box will be loaded on a ng-click like you did. Thanks ! – Azuken Feb 18 '14 at 10:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.