相关疑难解决方法(0)

为什么setTimeout(fn,0)有时会有用?

我最近遇到了一个相当讨厌的错误,其中代码是<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()

javascript dom event-loop

833
推荐指数
11
解决办法
23万
查看次数

Angular.js:在页面加载时设置元素高度

我是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)

这在我调整浏览器窗口大小时很有效,但是第一次加载网站时不应用样式.我在哪里可以将代码放入高度?

javascript angularjs

43
推荐指数
3
解决办法
10万
查看次数

在AngularJS服务调用之后填充jQuery UI手风琴

我正在尝试构建一个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)

javascript jquery jquery-ui angularjs

9
推荐指数
1
解决办法
7900
查看次数

$ timeout是等待Angular指令模板的最佳做法吗?

我们团队的等待指令模板渲染的设计模式是将我们的DOM操作代码包装在$timeout(在指令的链接函数中),我一度知道它是正常的设计模式.这仍然是真的,还是有更好/更安全的设计模式来做到这一点?

模式示例在ECMAScript6中:

link: ($scope, $element) => {
  $timeout(() => {
     var domElementFromTemplate = $element.find('myDOMElement');
  } 
}
Run Code Online (Sandbox Code Playgroud)

javascript directive angularjs typescript

8
推荐指数
1
解决办法
639
查看次数

在AngularJS Directive的link()函数中没有准备好DOM元素

我正在创建一个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 angularjs angularjs-directive

6
推荐指数
1
解决办法
3655
查看次数