Question

在html表中，我有一个使用ng-repeat构造的行列表。在这些行中，我有一个使用jquery来改变样式的单选按钮。使用此jquery ...

应用该样式

<script>
$(document).ready(function () {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green'
});
});
</script>

当我将此代码放在页面中时，单选按钮样式不起作用。但是，如果我将代码放在表格行中 - 它确实有用......

<div ng-controller="supplierController" class="row">
<div class="col-lg-6 m-t-m">
<div class="ibox float-e-margins">
    <div class="ibox-title">
        <h5>Price results </h5>
    </div>
    <div class="ibox-content">

        <table class="table table-striped">
            <thead>
            <tr>
                <th>Vendor</th>
                <th>Details</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="supplier in suppliers.prices">
                <td>{{ supplier.supplier_name }}</td>
                <td>£{{ supplier.price }}</td>
                <td>
                    <div class="radio i-checks"><label> <input
type="radio"  name="a"> <i>this</i></label>
 <script>
            $(document).ready(function () {
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green'
                });
            });
        </script>

</div>

                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

这很有效 - 但显然它是一个糟糕的主意，因为jquery会为每一行呈现。所以我的问题是，放置此代码的最佳位置在哪里，以便它也可以工作？我应该把它放进控制器吗？

道歉，如果我不清楚，我是Angular的新手。

非常感谢

Answer 1

仅针对插件部分的指令非常容易拼凑起来

angular.module('YourApp').directive('iChecks', function () {    
    return {
        restrict: 'C', // for class in markup
        link: function (scope, element, attrs) {
            // element is jQuery object (see note below)
            element.iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green'
            });
        }
    }
});

将要求您在页面中的 angular.js之前包含jQuery.js 。当你这样做时angular.element使用完整的jQuery库。

接下来的步骤是添加行为。请注意，修改范围的任何事件都需要使用scope.$apply()才能告诉angular运行摘要周期

Answer 2

正如你所说的那样，你所做的是一个糟糕的主意。正如Kevin在评论中已经说过的那样，你应该创建一个指令。

我创建了一个小小的要点，可以应用任意JQuery插件。

https://gist.github.com/ameyms/4f3a5d6a8d329609d44e

PS：我还没有测试过，所以不知道它是否有效！

我应该将这个jquery放在角度控制器中吗？

2 个答案: