Function not defined error for a function that's defined inside an angularjs controller

Question

I've looked through other "function is not defined" questions, but can't seem to find one that's applicable to my use case. I'm using angular.js.

I have an initially empty div, #mylist that I am populating dynamically in the js. I have a function defined inside a controller that I'm assigning to onChange event of a checkbox.

Here is the full doc:

<!doctype html>
<html data-ng-app="testapp">
<head>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="angular.min.js"></script>
    <script>
        var app = angular.module("testapp", []);        
        app.controller("MyAppController", function ($scope) {
            createCheckbox();

            function doSomething() {
                alert("hello!");
            }

            function createCheckbox() {
                $("#mylist").html("<input type='checkbox' onChange='javascript:doSomething();' />");
            }       
        });
    </script>
</head>

<body data-ng-controller="MyAppController">
    <div id="mylist"></div>
</body>
</html>

When run, clicking on the checkbox results in the function not defined error.

What am I missing here? Thanks.

I think some paraphrasing of "You're doing it wrong" is the most common thing said around angular discussions (and it's normally true). So basically you shouldn't be using jQuery to grab an element in the DOM... one sec think I can answer pretty easily. — shaunhusain
– shaunhusain, Commented Jul 10, 2013 at 3:38
For the time being, I'm employing angular just for routing. It's obvious I'm not an advanced js developer, and I couldn't tell whether the mistake was with angular or jq or plain js. I think it's reasonable to ask for help at this point to lead me in a direction. — Steven
– Steven, Commented Jul 10, 2013 at 11:25
@Steven I didn't mean to be demeaning/rude, was just saying I've heard something of that nature uttered a lot recently, that and the phrase "the angular way" which makes it sound like a cult. I'm no JS expert either, but skipped right from AS3/Flex to AngularJS. jQuery has always seemed a bit of a mess to me (not that Angular is all lollipops, but it feels more organized and far less error prone). Anyhow hope my answer makes some sense, basically I'm using binding to trigger a function that is watching that variable, so when it changes I'm triggering a function. — shaunhusain
– shaunhusain, Commented Jul 10, 2013 at 15:55
@shaunhusain, sorry, should have directed my comment specifically. I wasn't responding to you, I was responding to Chandermani. I appreciate your help. — Steven
– Steven, Commented Jul 10, 2013 at 16:36

shaunhusain · Accepted Answer · 2013-07-10 03:50:33Z

1

<!doctype html>
<html data-ng-app="testapp">
<head>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="angular.min.js"></script>
    <script>

var app = angular.module("testapp", []);

app.controller("MyAppController", function ($scope) {
    $scope.someProperty = true;


    $scope.$watch("someProperty", function (someProperty){
       alert("hello!"+someProperty)
     });
});

    </script>
</head>
<body data-ng-controller="MyAppController">
    <div id="mylist"><input type="checkbox" ng-model="someProperty"/></div>
</body>

</body>
</html>

http://jsfiddle.net/y6XhY/

answered Jul 10, 2013 at 3:50

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

2 Comments

Steven Over a year ago

Thank you for putting together a working sample. I'll take a look through this.

shaunhusain Over a year ago

oh also in this case (with a checkbox) you could just use ng-click to call a function within the scope from the HTML like ng-click="doSomething()" (or for a checkbox I believe ng-change="doSomething()") I was showing the watching a property version thinking of a input type "text" initially.

Hazarapet Tunanyan · Accepted Answer · 2015-08-12 15:58:21Z

0

If you use AngularJs, it's good practice to defined function inside you controller scope.$scope's field can be your function and instead of onChange you can use ngChange directive (only you have to set ngModel on that input).

$scope.doSomething = function() {
    alert("hello!");
}

answered Aug 12, 2015 at 15:58

Hazarapet Tunanyan

2,85528 silver badges30 bronze badges

Collectives™ on Stack Overflow

Function not defined error for a function that's defined inside an angularjs controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related