Question

我正在使用ng-show和ng-hide来显示/隐藏内容。我想在控制器中将showme状态从true更改为false。但是，当我使用下面的代码时，它不起作用。我正在使用Controller As语法。关于如何正常工作的任何建议？

HTML：

<h1 ng-show="showme">Confirm Order</h1>

<h4 ng-hide="showme">Contact Information</h4>

使用Javascript：

.controller('ContactFormCtrl',
   function ($http, serviceF, $scope) {
     var contactForm = this;

     $scope.$watch(serviceF.get, function(valid)

     {    
       if (valid === 'yes') {
         contactForm.showme=true;   
       } 
      else 
     {
         contactForm.showme=false;
       }
     });
});

服务：

.service('serviceF', function() {

   var valid = 'true';
   return {
      get: function () {
       return valid;
    },
      set: function (value) {
      valid = value;
    }
  };

UI路由器：

.state('payment', {
   url: '/payment',
    views: {

  // . . . 
   'top': {
    templateUrl: 'views/clientinfo.html',
    controller: 'ContactFormCtrl as contactForm'

  // . . . 
    }
})

Answer 1

我不确定您要尝试做什么，但Controller As语法在HTML中采用这种方式：

<div ng-controller="ContactFormCtrl as contactForm">
   <h1 ng-show="contactForm.showme">Confirm Order</h1>
   <h1 ng-show="contactForm.showme">Confirm Order</h1>
</div>

请注意＆＃39;作为contactForm＆＃39;在ng-controller指令中传递的东西

现在你知道showme实际上是contactForm的一个属性，它本质上是一个＆＃34;别名＆＃34; ContactFormCtrl控制器

从那里，只要控制器中showme属性发生变化，视图就会相应地运行。

// In your controller
var contactForm = this; // aliasing this
contactForm.showme = true; //or false

<强>更新由于您使用的是ui-router，因此您的视图中没有ng-controller应该很好。我注意到您没有将$scope传递给您的控制器，这可能是$scope.$watch无法正常工作的原因，因此无法更新视图。

.controller('ContactFormCtrl', function ($scope, $http, serviceF) {
    var contactForm = this;

    $scope.$watch(serviceF.get, function(valid) {    
      if (valid === 'yes') {
        contactForm.showme = true;   
      }else{
        contactForm.showme = false;
      }
   });
});

使用控制器更改提供给ngShow属性的表达式

1 个答案: