angularjs - ng-show不工作

Question

我使用ng-show来显示或隐藏导航器。

在index.html中：

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

在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'
    });
});

在HomeController.js中

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

在ErrorController.js中

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

我的导航器隐藏在两个页面中，尽管vm.message显示为真。为什么？你可以在https://github.com/ryantranvn/mean上帮助我。

Answer 1

正如this SO answer讨论的那样，使用this代替$scope

使用此样式时，根据指令文档，指令应在其返回对象中使用controllerAs属性。

如果希望变量名在视图中可用，一种快速的解决方法是在变量名前面加上$scope：

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

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

至于为什么文本在两个测试用例中都被隐藏，ng-show中使用的变量并没有定义。

Answer 2

由于您在控制器函数中使用"this“，因此必须使用"as”语法声明您的控制器。

如果使用路由绑定控制器，请在路由中添加以下代码

controller: "HomeController",
controllerAs: "HomeCtrl"

或者，如果您直接用html编写ng-controller，请使用以下代码

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