我最近遇到了一个相当讨厌的错误,其中代码是<select>
通过JavaScript动态加载的.这种动态加载<select>
具有预先选择的值.在IE6中,我们已经有了修复所选内容的代码<option>
,因为有时它<select>
的selectedIndex
值与所选<option>
的index
属性不同步,如下所示:
field.selectedIndex = element.index;
Run Code Online (Sandbox Code Playgroud)
但是,此代码无效.即使selectedIndex
正确设置了字段,最终也会选择错误的索引.但是,如果我alert()
在正确的时间插入声明,则会选择正确的选项.考虑到这可能是某种时间问题,我尝试了一些随机的东西,我之前在代码中看到过:
var wrapFn = (function() {
var myField = field;
var myElement = element;
return function() {
myField.selectedIndex = myElement.index;
}
})();
setTimeout(wrapFn, 0);
Run Code Online (Sandbox Code Playgroud)
这有效!
我已经找到了解决问题的方法,但是我很不安,因为我不知道为什么这会解决我的问题.有人有官方解释吗?使用"稍后"调用我的功能可以避免哪些浏览器问题setTimeout()
?
我是AngularJS的新手.我想创建网格(使用ng-grid),其高度取决于窗口高度,即.$('.gridStyle').height($(window).height() - 100);
我写了指令:
app.directive('resize', function($window) {
return function(scope, element) {
function applyHeight() {
scope.height = $window.innerHeight;
$('.gridStyle').height(scope.height - 100);
}
angular.element($window).bind('resize', function() {
scope.$apply(function() {
applyHeight();
});
});
applyHeight();
};
});
Run Code Online (Sandbox Code Playgroud)
这在我调整浏览器窗口大小时很有效,但是第一次加载网站时不应用样式.我在哪里可以将代码放入高度?
我正在尝试构建一个AngularJS应用程序,我正在使用jQuery UI手风琴控件.
问题是,jQuery UI手风琴是在我的AngularJS服务从服务器加载数据之前启动的.换句话说:手风琴在启动时没有任何数据,因此在填充AngularJS的数据时不会显示.
该视图如下所示:
<!-- Pretty standard accordion markup omitted -->
$("#b2b-line-accordion").togglepanels();
Run Code Online (Sandbox Code Playgroud)
我的AngularJS控制器看起来像这样:
app.controller('orderController', function ($scope, orderService, userService) {
// Constructor for this controller
init();
function init() {
$scope.selected = {};
$scope.totalSum = 0.00;
$scope.shippingDate = "";
$scope.selectedShippingAddress = "";
$scope.orderComment = "";
$scope.agreements = false;
$scope.passwordResetSuccess = false;
$scope.passwordResetError = true;
userService.getCurrentUser(2).then(function (response) {
$scope.user = response.data;
orderService.getProductCategoriesWithProducts($scope.user).then(function (d) {
$scope.categories = d.data;
});
});
}
// Other methods omitted
});
Run Code Online (Sandbox Code Playgroud)
我的AngularJS服务看起来像这样:
app.service('orderService', function …
Run Code Online (Sandbox Code Playgroud) 我们团队的等待指令模板渲染的设计模式是将我们的DOM操作代码包装在$timeout
(在指令的链接函数中),我一度知道它是正常的设计模式.这仍然是真的,还是有更好/更安全的设计模式来做到这一点?
模式示例在ECMAScript6中:
link: ($scope, $element) => {
$timeout(() => {
var domElementFromTemplate = $element.find('myDOMElement');
}
}
Run Code Online (Sandbox Code Playgroud) 我正在创建一个AngularJS指令,该指令应该包含一个基于C3.js的图表.问题是C3库没有看到它应该附加的DOM元素.该指令的link
功能如下所示:
link: function(scope, element, attrs) {
scope.someid = 'id';
scope.chart = c3.generate({
bindto: "#somechart"+scope.someid,
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
console.log($("#somechart"+scope.someid).size()); // this is a test, outputs 0
}
Run Code Online (Sandbox Code Playgroud)
该指令的模板包含:
<div id="#somechart{{ scope.someid }}">...</div>
Run Code Online (Sandbox Code Playgroud)
问题是,c3.generate()
的bindto
没有看到#somechartid
.在console.log()
当我把已经在输出0,这意味着该元素不存在于此刻的DOM link
函数被调用.
如果我从浏览器的控制台调用相同的图表生成代码,甚至从某些ng-click
图表生成代码.
有没有办法克服这个问题而不使用像这样的解决方案$timeout
?
更新2014-07-15 15:33更改了代码示例并添加了指令模板中的相关行.
javascript ×5
angularjs ×4
directive ×1
dom ×1
event-loop ×1
jquery ×1
jquery-ui ×1
typescript ×1