ng显示不看变量变化

Question

我有一个进度条，我想单击按钮后显示。 我在点击时将我的变量设置为true，但它不起作用。

有问题的ng-show在html的底部，我单击的按钮位于不同的html页面上，但是我没有包含它，因为它在同一个控制器中使用了successOnClick函数。我控制台在onclick中记录了isEmailing变量，它被赋值为true。不适用于ng - 如果要么

什么给？

module.exports = app => { 
 
    app.controller('ContactController', ($scope, $http) => { 
 
     $scope.isEmailing = false; 
 

 
     $scope.email = (e) => { 
 
      $scope.isEmailing = true; 
 

 
      const requestBody = {}; 
 
      const id = e.target.id; 
 
      requestBody.name = document.getElementById(`${id}-name`).value; 
 
      requestBody.email = document.getElementById(`${id}-email`).value; 
 
      requestBody.subject = document.getElementById(`${id}-subject`).value; 
 
      requestBody.body = document.getElementById(`${id}-body`).value; 
 

 
      $http.post('/email', JSON.stringify(requestBody), { 
 
        'Content-Type': 'application/json' 
 
       }) 
 
       .then(res => { 
 
        console.log('Success!'); 
 
        document.getElementById(`${id}-name`).value = ''; 
 
        document.getElementById(`${id}-email`).value = ''; 
 
        document.getElementById(`${id}-subject`).value = ''; 
 
        document.getElementById(`${id}-body`).value = ''; 
 
        $scope.isEmailing = false; 
 
       }) 
 
       .catch(err => { 
 
        console.log('Error!'); 
 
        $scope.isEmailing = false; 
 
       }) 
 
     } 
 

 
     $scope.successOnClick =() => { 
 
      $scope.isEmailing = true; 
 
     } 
 
    }) 
 
}

<footer class="footer" ng-controller="ContactController"> 
 
    <div class="footer__block social-media-container"> 
 
     <div class="social-media"> 
 
      <a href="https://www.facebook.com/Absolute-Zero-Polar-Cooler-Bag-for-Work-Golf-Picnics-Travel-and-More-258801584535251/"><img src="http://i.imgur.com/bVqv5Kk.png" alt="fb-icon"></a> 
 
      <a href="https://twitter.com/absolutezerobag"><img src="http://i.imgur.com/sJWiCHV.png" alt="twitter-icon"></a> 
 
      <a href="https://www.instagram.com/absolutezerobags/"><img src="http://i.imgur.com/o7yTVyL.png" alt="insta-icon"></a> 
 
     </div> 
 
    </div> 
 
    <div class="footer__block"> 
 
     <form class="footer__form" ng-submit="email($event)" id="footer"> 
 
      <textarea placeholder="Message" id="footer-body" required></textarea> 
 
      <input type="text" placeholder="Name" id="footer-name" required> 
 
      <input type="email" placeholder="Email" id="footer-email" required> 
 
      <input type="text" placeholder="Subject" id="footer-subject" required> 
 
      <input type="submit" placeholder="Email"> 
 
     </form> 
 
    </div> 
 
    <div class="footer__block mailing-list"> 
 
     <span>Join our Mailing List!</span> 
 
     <form> 
 
      <input type="email" placeholder="Email" required> 
 
      <input type="submit"> 
 
     </form> 
 
    </div> 
 
    <!-- <div class="grey-screen"> 
 
      <div class="success"> 
 
      <h1>Success!</h1> 
 
      </div> 
 
     </div> --> 
 
    <div class="progress-bar" ng-show="isEmailing"> 
 
    </div> 
 
</footer>

Answer 1

如果有多个相同类型的控制器，这是不是意味着，他们都是同一个实例。 AngularJS不是通过单例模式创建控制器。你应该事件的手段自行它们同步：

angular.module('app', []) 
 
.controller('MyController', ['$scope', '$rootScope', function($scope, $rootScope) { 
 
    $rootScope.$on('Changed', function(event, data){ 
 
     $scope.isEmailing = data; 
 
    }) 
 
    
 
    $scope.successOnClick = function(){ 
 
     $scope.$emit('Changed', !$scope.isEmailing); 
 
    } 
 
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MyController"> 
 
    <h3 ng-style="{'background-color' : isEmailing ? 'red' : 'white'}">First controller</h3> 
 
    <input type='button' ng-click='successOnClick()' value='Change color'/>   
 
    </div> 
 
    <div ng-controller="MyController"> 
 
    <h3 ng-style="{'background-color' : isEmailing ? 'red' : 'white'}">Second controller</h3> 
 
    <input type='button' ng-click='successOnClick()' value='Change color'/>  
 
    </div> 
 
</div>

如果位于内部的另外一个控制器，你可以尝试使用$scope.$parent.isEmailing（其中.$parent可以输入多次，取决于嵌套层次） ，但它非常不舒服。如果您的控制器位于不同的路线，您应该通过路线参数或自定义的AngularJS服务或$rootScope将数据从一个控制器传递到另一个控制器。