CODEWITHSUNDEEP
javascriptangularjs
basickarl
basickarl

Reputation: 40561

ng-include after application load

I currently have a server using handlebars to create an initial HTML page. In this page, I wish to have a ng-include to update the page on the client.

However, whenever my application runs, it loads the page, so the data-ng-include="template.url" loads template.url as it normally would. Is there anyway for ng-include to load this data after my application loads?

Here is a plunker. Look at the code inside index.html!

Upvotes: 0

Views: 1286

Answers (2)

Husni Firmansyah
Husni Firmansyah

Reputation: 61

Alternatively, you can use $location for your case, but for no more edited for your code, i can provide this solution for you:

  1. Remove your code inside index.html file, so your code become like this: 

    <!DOCTYPE html>
<html ng-app="myApp">
<head>
   <script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
   <div data-ng-controller="ctrl">
      <div data-ng-include="template.url"></div>
   </div>
</body>
</html>

2.Replace your script.js become like this:

angular.module('myApp', [])
.controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'init.html', url: 'init.html'},
    { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];
$scope.template = $scope.templates[0];

$scope.second = function () {
  $scope.template = $scope.templates[2];
};

$scope.first = function () {
  $scope.template = $scope.templates[1];
};
}]);

3.Create file init.html with code inside:

 Here is some stuff that I wish to remain until I press the button below.
 <button type="button" data-ng-click="second()">Press me!</button>
  1. Run it.

Upvotes: 0

nur farazi
nur farazi

Reputation: 1207

you can use

ng-if directive

just check for it initial loading , it will make your life easy

<ANY ng-if="expression">

 //your code goes here

</ANY>

such as 

<ANY ng-if="false">

// code will not execute 

</ANY>

i hope this will help you

on your code 

<body>
<div data-ng-controller="ctrl">
  <div data-ng-include="template.url" ng-if="false">

    Here is some stuff that I wish to remain until I press the button below.
  </div>
  <button type="button" data-ng-click="second()">Press me!</button>
</div>

based on your answer you should use your condition at your .js file here is your modified code 

 angular.module('myApp', [])
  .controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];

    if (false){
      $scope.template = $scope.templates[0];
    }


$scope.second = function () {
  $scope.template = $scope.templates[1];
};

$scope.first = function () {
  $scope.template = $scope.templates[0];
};

 }]);

Upvotes: 1

Related Questions