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

ng-show不看变量

1 个答案: