CODEWITHSUNDEEP
javascriptangularjs
Burninrock24
Burninrock24

Reputation: 85

Referencing angular function outside of scope

I have the following code roughly. How can I access myFunction() outside of the angular code? Help is greatly appreciated. ng-click isn't working with the DOM manipulation I am doing, but ng-repeat isn't working as I would like. I can get onclick events to work within the generated content. 

var app = angular.module('main', ['ui.bootstrap', 'ngTable']).controller('x', function ($scope, $filter, $http, $q, ngTableParams, $window) {

    var myFunction = function(){
        some angular stuff
    }

}

//javascript
function testFunction(){
    angular.element(document.getElementById('x')).scope().myFunction();
}

The above code is what I have found from searching and does not work as I would like. Giving the error in console: Cannot read property 'myFunction' of undefined

edit: Here is the DOM manipulation I'm doing... myFunction has id as an argument being passed in my actual implementation.

usersArray[] //populated object array with name and id

$scope.generateUsers = function(){
    for(var i = 0; i < usersArray.length; i++){
        document.getElementById("container").innerHTML += "<div ng-click='myFunction(" + usersArray[i].id + ")'> usersArray[i].name + "</div><br />";
    }
}

SOLUTION:

in the javascript function if I changed my code to: 

function testFunction(supUserId) {
    angular.element(document.getElementById('HTMLElementId')).scope().myFunction();
}

Changing the element from the controller (x in my case) to an HTML element in the body of my page worked.

Upvotes: 0

Views: 220

Answers (1)

Sathish
Sathish

Reputation: 116

myfunction is not declared inside scope. May be add ur myfunction inside like code below

var app = angular.module('main', ['ui.bootstrap', 'ngTable']).controller('x', 
function ($scope, $filter, $http, $q, ngTableParams, $window) {
    $scope.myFunction = function(){
        some angular stuff
    }
}

Upvotes: 1

Related Questions