I'm new to Angularjs and im trying to update two $scope variables in two seperate functions which are called on ng-click.
Even though the variables update, they wont rebind in the view.
HTML
<div ng-app="">
<div ng-controller="MainCtrl">
<p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
<p ng-controller="MainCtrl"><span ng-bind="something"></span></p>
<p ng-controller="MainCtrl"><span ng-bind="somethingelse"></span></p>
</div>
</div>
JS function MainCtrl($scope) {
$scope.something = "something";
$scope.somethingelse = "else";
$scope.getDetails = function () {
alert("getdetails before change: "+$scope.something);
$scope.something = 'changed';
alert("getdetails: "+$scope.something);
};
$scope.getElse = function () {
alert("getElse before change: "+$scope.somethingelse);
$scope.somethingelse = 'changed';
alert("getElse: "+$scope.somethingelse);
};
}
I've created a fiddle to show you what i mean: /
can anyone tell me what is the correct way to do this?
Thanks in advance.
I'm new to Angularjs and im trying to update two $scope variables in two seperate functions which are called on ng-click.
Even though the variables update, they wont rebind in the view.
HTML
<div ng-app="">
<div ng-controller="MainCtrl">
<p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
<p ng-controller="MainCtrl"><span ng-bind="something"></span></p>
<p ng-controller="MainCtrl"><span ng-bind="somethingelse"></span></p>
</div>
</div>
JS function MainCtrl($scope) {
$scope.something = "something";
$scope.somethingelse = "else";
$scope.getDetails = function () {
alert("getdetails before change: "+$scope.something);
$scope.something = 'changed';
alert("getdetails: "+$scope.something);
};
$scope.getElse = function () {
alert("getElse before change: "+$scope.somethingelse);
$scope.somethingelse = 'changed';
alert("getElse: "+$scope.somethingelse);
};
}
I've created a fiddle to show you what i mean: http://jsfiddle/M3pZ8/
can anyone tell me what is the correct way to do this?
Thanks in advance.
Share Improve this question asked Mar 28, 2014 at 16:06 Mr.HazeMr.Haze 431 gold badge1 silver badge4 bronze badges 02 Answers
Reset to default 12It's because you have MainCtrl
declared 3 times, effectively creating 3 separate scopes. You only need it once, at the top.
<div ng-controller="MainCtrl">
<p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
<p><span ng-bind="something"></span></p>
<p><span ng-bind="somethingelse"></span></p>
</div>
Updated your jsfiddle
don't need to add same controller multiple times.