javascript - Function inside setTimeout doesn't modify $scope variables / CSS properties -
i'm battling settimeout(), unable grasp problem be. first thought scope problem can't fix it.
i'd delay hiding/unhiding of div let css transition on opacity kick in when click alert_button fade hide alert, fades , i'm left invisible div. delayed $scope.alert_token doesn't switch 'true' , opacity of alert stuck on 1.
app.js :
angular.module('myapp', []) .controller('myctrl', function($scope) { $scope.alert_token = true // hide if true $scope.alert_message = "" $scope.p_name = "" $scope.isinarray = function(arr, item) { // if item in array if (arr.indexof(item) > -1) { $scope.alert_token = !$scope.alert_token $scope.alert_message = "entry exists" settimeout(function() { document.getelementbyid("alert").style.opacity = "1" }, 305) } else ... } $scope.submit = function(listtype) { if (listtype == "player") { $scope.isinarray(p_list, $scope.p_name) $scope.p_name = "" } else ... } $scope.closealert = function() { document.getelementbyid("alert").style.opacity = "0" settimeout(function() { $scope.alert_token = !$scope.alert_token }, 305) }
anything happening outside angular's knowledge not updated dom. in case settimeout
. instead use $timeout
.
...... .controller('myctrl', function($scope, $timeout) {... ^^^^^^^^ //other code .... $scope.closealert = function() { document.getelementbyid("alert").style.opacity = "0" $timeout(function() {//$timeout $scope.alert_token = !$scope.alert_token }, 305) }
also since using angularjs
, update css properties recommend use ngclass , ngstyle
Comments
Post a Comment