CODEWITHSUNDEEP
javascripthtmlangularjs
forethought
forethought

Reputation: 3253

my ng-include does not work

I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.

app.js code

    var app = angular.module('myApp', []);

    app.controller('mainCtrl', [$scope, function($scope)
    {
      $scope.templateID = 'testing1.html';

      $scope.changeTemplateID = function($scope){
          $scope.templateID = 'testing2.html';
        }

    }]);

index.html file

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <ng-include src="templateID"></ng-include>
    <h1>Hello Plunker!</h1>

    <p ng-click="changeTemplateID()">next</p>
  </body>

</html>

There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.

but no success. Any help?

Upvotes: 0

Views: 57

Answers (2)

Wainage
Wainage

Reputation: 5412

Two errors in your JS code:

var app = angular.module('myApp', []);
    //                          vvvvvvvv  must be a string
    app.controller('mainCtrl', ['$scope', function($scope)
    {
      $scope.templateID = 'testing1.html';

      // you don't need to pass $scope here:
      $scope.changeTemplateID = function(){
          $scope.templateID = 'testing2.html';
        }

    }]);

Plunker for your perusal.

Upvotes: 2

lomboboo
lomboboo

Reputation: 1233

app.controller('mainCtrl', [$scope, function($scope)... Your [$scope must be ['$scope' like a string, change it and you'll be fine )

Upvotes: 0

Related Questions