I wrote quite a simple function with some Jquery code in it and I can't get it to work for some reason.
What am I missing?
HTML
<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
<p>Here should be five -> </p>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function ($scope) {
$scope.onload = function(scope) {
$('p').each(function(){
$(this).html($(this).html().replace(/ /gi,"5"));
});
};
});
You shouldn't be manipulating the DOM in a controller for quite a few reasons which are detailed in Angular docs and in a number of StackOverflow tickets.
Recommended Reading:
There's no load event in Angular controllers (and if there was it would be called with the $scope.$on('load',function(){}); approach).
You should be using Angular data binding / interpolation here instead. Here's an example:
<p>Here should be five -> {{number}}</p>
And your controller:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function ($scope) {
$scope.number = 5;
});
A few things:
The codepen has jqueryui and jquery in the wrong order, so you get an error. Also, the controller is called MainCtrl but in the HTML you have DropdownCtrl.
As for the actual mistake: just because you call a function onload doesn't mean that it actually executes when the controller starts. Take it out of that function and it'll do what you intended.
Like so:
myApp.controller('MainCtrl', function ($scope) {
$('p').each(function(){
$(this).html($(this).html().replace(/ /gi,"5"));
});
});
While this might work in this instance, you shouldn't be manipulating the DOM in the controller anyways. The first rule of Angular controllers is:
"Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation."
