Question

我是Angular的新人，请帮帮我！

我有一个页面，里面有一个视图：

<div class="row">
    <div class="col-md-12">
        <ui-view></ui-view>
    </div>
</div>`

在包含的部分中有一些jquery插件，如Revolution Slider和其他东西。问题是ui-view中的所有jquery插件都无法正常工作。

我搜索了原因，我知道jquery库必须包含在Angular的之前，我做了，但没有任何改变。

如何正确运行所有jquery脚本？

Answer 1

这样做的原因是您使用的所有jQuery插件都会在页面加载后立即启动。但Angular在此之后的某个时间填充了<ng-view/>。解决方案是手动启动插件。对此的角度方式是为每个“特殊”元素创建自己的指令，并在其link函数中应用相应的jQuery插入。让我们使用日历，例如：

app.directive('calendar', function(){

    return {
        template: '<div class="calendar"></div>',
        link: function(scope, el, attrs, ctrl){

            $(el).makeCalendar();
        }
    }
})

这样，您可以在HTML中使用<calendar></calendar>来创建日历。

修改

感谢您的回答，但也许我不明白......

例如，在document.ready上我这样做：

$doc.ready(function() {
    var $sliderRange = $('#slider-range');
    var $amount = $('#amount');
    if ($sliderRange.length) {
    // apply range slider
    $sliderRange.slider({
        range: true,
        min: 0,
        max: 3000,
        values: [0, 2600],
        slide: function(event, ui) {
        $amount.val('€' + ui.values[0] + ' - €' + ui.values[1]);
    }
    });
    $amount.val('€' + $sliderRange.slider('values', 0) + ' - €' + 
    $sliderRange.slider('values', 1));
    }
 });

我如何使用指令执行此操作？

示例：

app.directive('slider', function(){

    var defaults = {
        range: true,
        min: 0,
        max: 3000,
        values: [0, 2600],
    };

    return {
        template: '<div></div>',
        replace: true,
        scope: {
            options: '=',
            value: '='
        },
        link: function(scope, el, attrs, ctrl){

            // merge options with defaults
            var opts = ng.extend({}, defaults, scope.options);

            // set initial value
            opts.values = scope.value = scope.value || [0, 0];

            // watch for changes and update the scope's value
            opts.slide = function(event, ui){
                scope.value = ui.values;
                scope.$apply();
            };

            // apply the jquery plugin with the options
            $(el).slider(opts);
        }
    }
})

现在你这样使用它：

<slider value="sliderValue"></slider>
<p>Result: €{{sliderValue[0]}} - € {{sliderValue[1]}}</p>

你可以修改这样的选项：

<slider value="sliderValue" options="{max: 100}"></slider>

Angular - 在ng-view中的JQuery不起作用

1 个答案: