做一個搜尋歷史框，input獲得焦點就顯示搜尋歷史框，框寬度與input框同寬（因為input後還有一個搜尋按鈕呢）否則不顯示。

在獲得焦點的函式中，已經把flag賦值為true了，卻還是不能執行下面的寬度設定值；

<input class='form-control' ng-model='criteria.keyword' placeholder='輸入搜尋關鍵字' ng-focus="togglePanel($event)" ng-blur="flag=false">
<ul class="history-panel" ng-if="historyRecords.length"
 
 ng-show="flag">
    <li class="history-item" ng-repeat="record in historyRecords" ng-click="chooseHistoryRecord(record)">{{record}}</li>
</ul>

$scope.togglePanel = function($event) {
        $scope.flag = true;
        var inputWidth = $event.target.offsetWidth;
        document.
 
querySelector('.history-panel').style.width = inputWidth;
}

最後除錯突然醒悟，應該是： **第一，即使你設定了為true，angularjs的繫結還需要一段時間，這時的元素依然是隱藏的； 第二，ng-hide使用的是display：none !important的css，大家都知道了，display：none的元素是不佔空間的，所以你獲取不到元素的一些樣式值；** 所以在邏輯中即使寫了設定width，是無效的。 最後，綜合了移動端的展示，把ul的寬度設定為了100%；那些事件也就可以刪除了，在頁面中初始化flag就可以了。