Javascript 使用外部插件更改输入时保持模型更新

我正在尝试编写一个封装插件的指令。它主要是工作，但我希望该指令与其他代码尽可能兼容，并且它看起来不会更新通过插件更改的附加到输入的模型

我尝试调用$apply和$digest，以便范围可以尝试更新，但模型中的值没有改变

该指令：

angular.module('myApp.directives', []).
directive('skinned', function () {// Might need to cover all radios
    return {
        restrict: 'A',
        scope   : {
            skinned       : '@',
            skinnedInsert : '@'
        },
        link    : function (scope, elem, attrs) {
            var inputs = elem.find('input');

            var checkboxClass = 'icheckbox';
            var radioClass = 'iradio';

            if (scope.skinned) {
                checkboxClass += '_' + scope.skinned;
                radioClass    += '_' + scope.skinned;
            }

            var options = {
                cursor        : true,
                checkboxClass : checkboxClass,
                radioClass    : radioClass,
                insert        : scope.skinnedInsert
            };

            inputs.iCheck(options);

            elem.on('ifChanged', function(event) { scope.$digest(); });

            scope.$watchCollection(
                function() { //The collection that will be checked for changes
                    var result = [];
                    inputs.each(function(index, el) {
                        result.push($(el).prop('checked'));
                    });
                    return result;
                },
                function() { // What happens when the collection changed
                    inputs.iCheck('update');// Notify our plugin
                }
            );
        }
    }
});

我认为我可能在错误的范围内，并尝试通过angular.element（event.target.scope（））获取范围，但这并没有改变任何事情

HTML

<ul skinned="flat-grey">
    <li data-ng-click="checktest = true"><input id="1" type="checkbox" ng-model="checktest" /><label for="1">Label_1</label></li>
    <li><input id="2" type="checkbox" /><label for="2">Label_2</label></li>
    <li><input id="3" type="checkbox" /><label for="3">Label_3</label></li>
    <li><input id="4" type="checkbox" /><label for="4">Label_4</label></li>
    <li><input id="5" type="checkbox" /><label for="5">Label_5</label></li>
</ul>

标签1
标签2
标签3
标签4
标签5

当通过ng更新模型时，单击iCheck将其拾取，但不是相反

---

下面是一个例子：

单击li并始终使模型为真不会有帮助。此外，插件自定义事件应该绑定到输入，而不是

，这不是实际的用例。那只是为了说明问题。您是对的，事件在输入上可能更好，但即使进行了更改，也无法解决问题。我个人只会为输入创建指令，而不是为set创建指令。但是，我更倾向于使用CSS，而忽略插件。CSS的问题是，它不能跨浏览器为这些元素设置可靠的样式。我在这里做了一个快速更改：，但这对更新附加到输入的模型没有影响。好的…试试这个。我喜欢在不需要隔离作用域时删除它们。这仅基于

attrs