I'm currently learning about Angular and attempting to implement a controller. However, I've run into an issue where the ng-click is not working (the function is not being called). According to the Chrome extension Batarang, the function is defined as null. Can anyone explain why?
angular.module('starter', ['ionic'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("TodoControl", function Controller() {
var thisRef = this;
this.todos = [
{
text: "my todo 1",
done: false
},
{
text: "my todo 2",
done: true
}
];
this.newEntry = "hello";
this.AddEntry = function () {
console.log("adding");
thisRef.todos.push({
text: this.newEntry,
done: false
});
thisRef.newEntry = "";
}
});<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="TodoControl as ctr" class="container">
<form role="form">
<div class="form-group" ng-repeat="t in ctr.todos">
<div class="checkbox">
<label class="checkbox-inline">
<input class="form-control todoFormControl" type="checkbox" ng-model="t.done"><span>{{t.text}}</span></label>
</div>
</div>
</form>
<label><input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" ><button class="btn" ng-click="ctr.AddEntry()">Add</button></label>
</div>
</ion-content>
</ion-pane>
</body>This application uses Ionic (which includes Angular).
Edit: Here's a JSFiddle link for reference: http://jsfiddle.net/duowfLsn/