使用angularjs指令用于icheck插件

时间:2014-01-21 00:03:52

标签: angularjs angularjs-directive icheck

我的Angularjs应用程序出了问题,无法弄清问题在哪里。

在plunker Here

上查看

当我点击按钮时,它应该运行iCheck()插件,但它不是

2 个答案:

答案 0 :(得分:9)

更好的iCheck指令可以在这里找到:https://github.com/fronteed/iCheck/issues/62(wajatimur)

return {
    require: 'ngModel',
    link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
            var value;
            value = $attrs['value'];

            $scope.$watch($attrs['ngModel'], function(newValue){
                $(element).iCheck('update');
            })

            return $(element).iCheck({
                checkboxClass: 'icheckbox_flat-aero',
                radioClass: 'iradio_flat-aero'

            }).on('ifChanged', function(event) {
                if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                    $scope.$apply(function() {
                        return ngModel.$setViewValue(event.target.checked);
                    });
                }
                if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                    return $scope.$apply(function() {
                        return ngModel.$setViewValue(value);
                    });
                }
            });
        });
    }
};

答案 1 :(得分:1)

为了让一切正常,你应该做一件事:强制AngularJS实际使用jQuery

AngularJS在其源代码中包含jQlite,但它与jQuery不同。如果在 angular.js之前包含jQuery ,那么Angular将使用它而不是自己的实现。

因此,只需在index.html中更改此内容:

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>

(jQuery在angular.js之前)

working Plunker