CODEWITHSUNDEEP
angularjsng-show
Ryan Tran
Ryan Tran

Reputation: 487

angularjs - ng-show does not woking

I use ng-show to show or hide navigator.

In index.html :

<div class="container" ng-show="vm.error" nav></div>

In app.js

var siteApp = angular.module('siteApp', ['ngRoute']);
siteApp.config(function($routeProvider) {
$routeProvider
    .when('/', {
        controller: 'HomeController',
        controllerAs: 'vm',
        templateUrl: '/home.html'
    })
    .when('/404', {
        controller: 'ErrorController',
        controllerAs: 'vm',
        templateUrl: '/404.html'
    });
});

In HomeController.js

siteApp.controller('HomeController', function(){
    var vm = this;
    vm.error = false;
    vm.message = "Halu home page";    
});

In ErrorController.js

siteApp.controller('ErrorController', function(){
    var vm = this;
    vm.error = true;
    vm.message = "Error 404";
});

My navigator hides in both of pages although vm.message show true. Why ? You can help me at : https://github.com/ryantranvn/mean

Upvotes: 0

Views: 233

Answers (2)

Pawan Gupta
Pawan Gupta

Reputation: 154

Since you are using "this" in the controller function, you will have to declare your Controller with "as" syntax.

If you are using routes to bind the controller, add below code in routes 

controller: "HomeController",
controllerAs: "HomeCtrl"

Or if you are directly writing ng-controller in html, use below code

<div ng-controller="HomeCtrl as HomeController">
   <div class="container" ng-show="HomeCtrl.error" nav></div>
</div>

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 522762

As this SO answer discusses regarding using this in place of $scope:

When using this style, directives should use the controllerAs property in their return object per the Directive documentation.

A quick workaround for you would be to preface variable names with $scope if you want them to be available in the view:

siteApp.controller('HomeController', function(){
    $scope.error = false;
    $scope.message = "Halu home page";    
});

<div class="container" ng-show="error" nav>{{message}}</div>

As to why the text was being hidden in both your test cases, the variable being used in ng-show was not defined.

Upvotes: 1

Related Questions