ng-if not working with simple javascript

Question

ng-if is not working when I change the values through simple javascript function.My function is getting called but the changes in values cannot be seen in view. Please refer below code.

HTML

<div id="span" ng-app='MyModule' ng-cloak ng-controller="MyController">

<div ng-if="!bool">
  This is for true
</div>
<div ng-if="bool">
  This is False
</div>
{{bool}}
<br>
<input type="submit" ng-click = "myfunction('test')" value="ng-if button">
</div>
<input type="submit" onClick = "check1()" value="simple JS button">

JS

angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.bool = true;
$scope.myfunction = function (data) {
    $scope.bool = !$scope.bool;
};
});
function check1() {
    angular.element(document.getElementById('span')).scope().myfunction('test');
}

When I use ng-click button it changes value of bool changes, but same doesn't happens with simple JS button . Actually I am implementing Angular in a page that already uses jQuery, so I need to use simple JS button.

JS Fiddle : JS Fiddle

Possible duplicate of Call angularjs function using jquery/javascript — MBielski
– MBielski, Commented Mar 31, 2017 at 13:49

DevDig · Accepted Answer · 2017-03-31 13:49:46Z

1

At first, ng-click is able to parse an angular expression.

Second, it handles the reference to the current scope and performs a call to $scope.$apply to notify any watchers to update. If you would add a call to angular.element(document.getElementById('span')).scope().$apply() in your function, it should work as expected.

answered Mar 31, 2017 at 13:49

DevDig

1,01813 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RemyaJ · Accepted Answer · 2017-03-31 13:50:32Z

0

Use $scope.apply . This is because angulars digest cycle will not know if your value changes outside of its scope like in a simple JS function.

answered Mar 31, 2017 at 13:50

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

1 Comment

RemyaJ Over a year ago

Hope this helps you.

Collectives™ on Stack Overflow

ng-if not working with simple javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related