I want to set a value to a variable in $scope from jQuery function as below code. Everything is good but the new value is reflecting in UI.
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
$('#sample').click(function(e){
$scope.carname = "Audi";
});
});
Here is my plete program: Link
I will be glad if someone help me with this.
I want to set a value to a variable in $scope from jQuery function as below code. Everything is good but the new value is reflecting in UI.
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
$('#sample').click(function(e){
$scope.carname = "Audi";
});
});
Here is my plete program: Link
I will be glad if someone help me with this.
Share Improve this question asked Mar 6, 2017 at 8:19 Balaji Rao SolankiBalaji Rao Solanki 432 silver badges5 bronze badges 1-
3
why not use
ng-clickhandler – Arun P Johny Commented Mar 6, 2017 at 8:20
3 Answers
Reset to default 5In order to make your code work, you need to run $scope.$digest() after you assign $scope.carname = "Audi";
Like this:
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
$('#sample').click(function(e){
$scope.carname = "Audi";
$scope.$digest();
});
});
Here's a w3schools link to the program: Link
As mentioned in the ments below, you can also use $scope.$apply() like the following:
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
$('#sample').click(function(e){
$scope.$apply( function() {
$scope.carname = "Audi";
});
});
});
Here's a w3schools link to the program: Link
You can read more about the use cases for $scope.$digest() and $scope.$apply() in the following links:
- Understanding Angular's $apply() and $digest()
- AngularJS $watch(), $digest(), and $apply()
Note: As mentioned in many other ments & some answers, Angular does provide a built-in method to listen for a click event, called ng-click. Here is the documentation for it: AngularJS: ngClick
Angular JS provides ng-click directive to handle click event.Just add ng-click=function_name() as an attribute in your HTML element.The ng-click directive tells AngularJS what to do when an HTML element is clicked.
Example
angular.module('myApp', [])
.controller('myCtrl',function($scope) {
$scope.myFunc = function() {
console.log('clicked');
};
});<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Click</button>
</div>I am not sure, why aren't you using the standard ng-click to catch the click event. Please explain if you have a specific reason for that. But if you still want to follow the Jquery way, you should invoke angular digest cycles, as soon as you change the value. Use $scope.$apply()
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744785079a4593575.html
评论列表（0条）