在代码

Question

我正在搜索搜索页面。如果没有从服务器返回任何结果，则会出现无结果消息框，如果用户仍然再次搜索该单词，我希望消息框的淡出和淡入效果，以便用户知道他们的搜索工作的页面。在这种情况下一切正常，因为我在将搜索请求发送到服务器之前隐藏了消息框。

但是当我向页面添加一些验证时，当我尝试隐藏并连续显示无效搜索条件的消息框时，淡出淡出效果不起作用。我认为是因为我在代码中更改了消息状态。但问题似乎有所不同。

当我尝试将消息从无结果更改为无效时，效果会发生。

这听起来很复杂，所以这里是摘要：

• 多条无结果讯息 - ＆gt;工作正常（拨打服务器）
• 多个无效搜索条件 - ＆gt;不起作用（没有服务器调用）
• 从无结果到无效的搜索条件 - ＆gt;工作正常（没有服务器调用，我不知道为什么以上不起作用，但确实如此）
• 从无效搜索条件到无结果 - ＆gt;工作正常（毫无疑问，因为有服务器调用）

我认为这可能与angular内置的$ apply函数有关。

这是代码

var showNoResult = function() {
    vm.showSearchResult = false;   //result table
    vm.showMsg2 = false;           //invalid
    vm.showMsg1 = true;            //no result
    vm.showMsg = true;             //message box
};     
var showInvalid = function() {            
    vm.showSearchResult = false;
    vm.showMsg1 = false;
    vm.showMsg2 = true;
    vm.showMsg = true;  
};      
var hideMsg = function() {
    vm.showMsg = false;
    vm.showMsg1 = false;
    vm.showMsg2 = false;
};
vm.sendData = function(page) {
    hideMsg();
    if(!isFormValid()) {               
        showInvalid();     //problem here
        return;
    }
    // call to server
    mapData(function(data) {                
        data.pagenum = page || 1;
        searchService.searchEmployee(data).then(function(response) {                    
            if (response.data[0] == 0) {
                showNoResult();
                return;
            }
            vm.users = response.data[1];
            vm.totalItem = response.data[0];
            vm.showSearchResult = true;
        });
    });
};

这是html：

<div id="message-box" class="panel panel-default ng-hide" ng-show="searchCtrl.showMsg">
    <div class="panel-body">
        <i class="fa fa-info" aria-hidden="true" id="no-result-icon"></i>
        <p id="no-result-text" ng-show="searchCtrl.showMsg1">   
            <b>{{ searchCtrl.msg.msg1.msg1_1}}</b>
            <br>                                        
            {{ searchCtrl.msg.msg1.msg1_2}}
        </p>
        <p id="invalid-form-text" ng-show="searchCtrl.showMsg2">
            {{ searchCtrl.msg.msg2 }}
        </p>
    </div>
</div>