ng-show不监视变量更改

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将数据从一个控制器传递到另一个控制器。