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.net/M3pZ8/
can anyone tell me what is the correct way to do this?
Thanks in advance.
It'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>
更新了你的jsfiddle
don't need to add same controller multiple times.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.