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显示为true，但我的导航器隐藏在两个页面中。为什么？您可以通过以下方式帮助我：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。

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

controller: "HomeController",
controllerAs: "HomeCtrl"

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

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

Answer 3

在html中添加$scope.showError = false; $scope.Update = function () { var servCall = ProjectSetting_Service.update(sub); servCall.then(function (data) { alert(JSON.stringify(data)); }); }, function (error) { //alert message $scope.showError = true; }视图，并在错误中显示该视图

试试这个在控制器

<div ng-show="!showError ">
    <p> Everything is going fine :)</p>    
</div>
<div ng-show="showError ">
    <p> 404 sorry</p>
</div>

在HTML中

n <- 100
cc <- colorRampPalette(c("red", "blue"))(n)
plot.new()
par(mar=rep(0,4))
sapply(1:n, function(i) rect((i-1)/n, 0, i/n, 1, col=cc[i], border=NA))
dev.copy2pdf(file="test.pdf")

angularjs - ng-show不会工作

3 个答案: