Keep angular content on index.html off template pages?

Question

Is there a way to have the contents of the view page not show on template pages?

Say my index page is to display blog posts and has the code

    
    
    
    
      
     

    
    
    
    

 
    
    
      Home
     Register


    
  


 

    {{article.title}}
    {{article.post}}

When I goto template pages, for example the register template, the nav and blog posts that are meant for only index.html are showing on the register page as well as all the other templates. (test post)

Code for register.html

      
    
     
     AngularJS Blog
     
     
     
     
     
    
     
    

  
  
    AngularJS Blog!
  
  

    Email
    
    Enter a valid email.
 

    Password

    
    Min password length is 8 characters.
 {{regErrorMessage}}

Code for register.js

    'use strict';

    angular.module('myApp.register', ['ngRoute','firebase'])

    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/register', {
        templateUrl: 'register/register.html',
        controller: 'RegisterCtrl'
      });
    }])

    .controller('RegisterCtrl', ['$scope','$location','$firebaseAuth', function($scope,$location,$firebaseAuth) {

$scope.mesg = 'Hello';
     var firebaseObj = new Firebase("myblog-xxx.com");
    var auth = $firebaseAuth(firebaseObj);
     var login={};
    $scope.login=login;

    $scope.signUp = function() {
if (!$scope.regForm.$invalid) {
    var email = $scope.user.email;
    var password = $scope.user.password;
    if (email && password) {
login.loading = true;
        auth.$createUser(email, password)
            .then(function() {
                // do things if success
                console.log('User creation success');
                $location.path('/home');
            }, function(error) {
                // do things if failure
                console.log(error);
                $scope.regError = true;
                $scope.regErrorMessage = error.message;
            });
    }
}
    };
      }]);

Please let me know if additional information is needed as I'm not sure exactly where the problem lies. Thanks.

Ignacio Villaverde · Accepted Answer

Take a look at ng-if ng-show ng-hide directives

https://docs.angularjs.org/api/ng/directive/ngIf

ng-if is better in terms of performance.

ng-show will render an element, and use display:none to hide it, ng-if will actually remove the element from DOM, and will re-create it, if it’s needed. You may need ng-show for an elements that toggles on an off often, but for 95% of the time, ng-if is a better way to go.

However, I think your real problem here is that what changes with your route is what

renders.

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

So obviously if you declare other components outside your templates in your index.html, those tags will keep on showing in every view.

For example:



 
    
    
      Home
     Register

There, no matter which your template is, the nav bar will be shown.

BTW if you still want to manage it outside your ng-view you coud use ng-if. Like this:

 
    
    
      Home
     Register

expression should be an evaluatable expression. Take a look at the examples provided by the official documentation.

Keep angular content on index.html off template pages?

Answers (1)

Related Questions