Why adding an ng-click to the html body does not work?

Asked

Viewed 63 times

1

I have the code:

<div ng-show="d.box" class="box-red">
   <img src="images/boxred.jpeg">
</div>
<div>
   <i class="button" ng-click="d.box = !d.box"></i>
</div>

When I click on the icon (which is a button) a red square appears on the screen, because the Controller variable: d.box is set of false for true, but if there is no ng-click and I add manually in the inspect does not work. Why does this happen?

html angularjs

  • As such "add manually to inspect"?

  • Open the code in the inspect right-click go into html and manually add ng-click.

1 answer

1

You need to do something like:

<div ng-show="d.box" class="box-red">
    <img src="images/boxred.jpeg">
</div>
<div>
    <i class="button" ng-click="toggleFunc()"></i>
</div>

And in the controller you create a function that changes the state of the variable in Scope

app.controller('myCtlr', function($scope){
    $scope.d.box = false; //garante que a var será criada
    $scope.toggleFunc = function(){
        if($scope.d.box) {
            $scope.d.box = false;
        } else {
            $scope.d.box = true;
        }
    }
});

Browser other questions tagged html angularjs

You are not signed in. Login or sign up in order to post.