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'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.
Share Improve this question edited Aug 13, 2015 at 1:29 C1pher 1,9726 gold badges34 silver badges52 bronze badges asked Jul 10, 2013 at 3:13 StevenSteven 1,1092 gold badges15 silver badges34 bronze badges 4- I think some paraphrasing of "You're doing it wrong" is the most mon 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 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 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 Commented Jul 10, 2013 at 15:55
- @shaunhusain, sorry, should have directed my ment specifically. I wasn't responding to you, I was responding to Chandermani. I appreciate your help. – Steven Commented Jul 10, 2013 at 16:36
2 Answers
Reset to default 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/y6XhY/
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!");
}