Execute ng-include when a button is clicked - Angularjs

Question

I want to execute a ng-include and show the content only after a button is clicked. I tried to use the ng-if directive and show the div when the ng-model is true, but his value is not changed in the myFunctionfunction.

<div ng-controller='myCtrl'>
    <div ng-if='include==true' ng-include='"path"'></div>
    <input type="button" ng-click='myFuntion()'/>
</div>

.controller('myCtrl', function($scope){
    $scope.include = false;
    $scope.myFunction = function(){
        $scope.include = true;
    }
})

ng-if='include'

Sachila Ranawaka
– Sachila Ranawaka

2018-07-04 12:58:19 +00:00
Commented Jul 4, 2018 at 12:58 — Sachila Ranawaka
– Sachila Ranawaka, Commented Jul 4, 2018 at 12:58

Ankit Agarwal · Accepted Answer · 2018-07-04 13:02:30Z

2

There is a typo in your ng-click function. myFuntion should be myFunction. You can also just use ng-if='include' instead of ng-if='include==true'.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.include = false;
     $scope.myFunction = function(){
        $scope.include = true;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-if='include'>Clicked</div>
  <input type="button" ng-click='myFunction()'/>
</div>

answered Jul 4, 2018 at 13:02

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

Martin Larocque · Accepted Answer · 2018-07-05 13:57:19Z

0

I would simply create a function that change the variable path for a valid one, no need to do a ng-if

$scope.myFunction = function(newPath){
      $scope.path = newPath;
}

<div ng-include="path"></div>
<input ng-click="myFunction('path/to/file.html')" type="button />"

answered Jul 5, 2018 at 13:57

Martin Larocque

1903 silver badges11 bronze badges

Collectives™ on Stack Overflow

Execute ng-include when a button is clicked - Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related