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

Question

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

应用样式

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

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

<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'
            });
        }
    }
});

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

接下来的步骤是添加行为。请注意，任何修改范围的事件都需要使用 scope.$apply() 以便告诉 angular 到运行一个摘要循环

Answer 2

正如你所说的那样，你的想法很糟糕。正如凯文在评论中所说，您应该创建一个指令。

我创建了一个小要点来启用任意 JQuery 插件。

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

PS: I haven't tested it out, so don't know if it works!

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

Should I place this jquery inside an angular controller?

jquery

controller

radio-button

angularjs