Running a function with ng-click
So, I set up a very simple application to test the function ng-click
:
JS:
var choreApp = angular.module('choreApp', []);
choreApp.controller('choreCtrl', function($scope){
$scope.logChore = function(chore){
alert(chore + ' is finished!')
}
})
choreApp.directive('kid', function(){
return {
restrict: 'E',
scope: {
done: '&'
},
template: "<input type=text ng-model='chore'/>{{chore}}</br>"
}
});
HTML:
<div ng-controller='choreCtrl'>
<kid done='logChore()'></kid> <div class='button' ng-click='done({chore:chore})'>Button</div>
</div>
However, when I click .button
, nothing happens. Literally nothing happens, no errors in the console or whatever. Can someone explain why?
+3
source to share
1 answer
First of all, you need to boot. ng-app
<div ng-controller='choreCtrl' ng-app="choreApp">
then set jsfiddle to "No wrapper in <head>"; in the top left corner, not onLoad.
then the 'done () method you expected to call, which wraps logChore (), will not be called, try adding:
choreApp.controller('choreCtrl', function($scope){
$scope.logChore = function(chore){
alert(chore + ' is finished!')
}
$scope.done = function() {
alert('done');
}
})
if you create a link function in your directive and call scope.done () then logChore () is called.
0
source to share