做一个搜索历史框,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就可以了。