Load AngularJS controller in javascript code

Question

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

That's an anti pattern in angular.js -> $("#myDialog") , This code should probably live inside a directive. please provide a plunker — Ilan Frumer
– Ilan Frumer, Commented Feb 17, 2014 at 14:44
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
– plalx, Commented Feb 17, 2014 at 14:44

Shibbir Ahmed · Accepted Answer · 2014-02-17 14:54:20Z

0

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>

answered Feb 17, 2014 at 14:54

Shibbir Ahmed

1,35013 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Azuken Over a year ago

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 !

Collectives™ on Stack Overflow

Load AngularJS controller in javascript code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related