angularjs-ng-show不起作用

Question

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

Answer 1

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.

Answer 2

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>