Question

我创建了一个Angular指令但它不会与ng-repeat一起运行。我不知道为什么。第二个指令成功运行。

JavaScript的：

angular.module('myApp',[])
                .controller('Ctrl',['$scope', function ($scope) {
                    $scope.vvv = [];
                    $scope.bbb = [];
                    $scope.testdatas = [{text : 0},{text : 1},{text : 2},{text : 3}]
                }])
                .directive('wstCheckbox', function () {
                    return {
                        restrict:'EA',
                        replace:true,
                        template:'<div ng-transclude></div>',
                        scope:{
                            modelname : '=' //ths is the model
                        },
                        transclude:true,
                        link : function (scope,element,attrs) {
                            console.log(element)
                            $(element).find('input[type=checkbox]').on('change', function () {
                                scope.modelname = [];
                                scope.$apply(function () {
                                    $(element).find('input[type=checkbox]:checked').each(function () {
                                        scope.modelname.push($(this).val());
                                    })
                                })

                            })
                        }
                    }
                })

HTML：

<div>
    <wst-checkbox modelname="vvv">
        <div>{{vvv}}</div>
        <input type="checkbox" name="test" value="data.text" ng-repeat="data in testdatas"/>
    </wst-checkbox>
    <wst-checkbox modelname="bbb">
        <div>{{bbb}}</div>
        <input type="checkbox" name="test" value="0" id="4"/><label for="4">index 0</label>
        <input type="checkbox" name="test" value="1" id="5"/><label for="5">index 1</label>
        <input type="checkbox" name="test" value="2" id="6"/><label for="6">index 2</label>
        <input type="checkbox" name="test" value="3" id="7"/><label for="7">index 3</label>
    </wst-checkbox>
</div>

Answer 1

我在Plunker http://plnkr.co/edit/Vh4KxPxJyEsaOPrK38sV?p=preview中运行了您的代码，除了您需要设置value="{{data.text}}"而不是value="data.text"之外，我没有看到任何问题我添加了一个标签使第一个指令看起来像第二个指令。

Answer 2

问题是，在你绑定到change事件时，angular还没有呈现ng-repeat。如果你设置一个超时来给它时间来呈现它应该工作的一切。

这是一个有效的Plunker

link : function (scope,element,attrs) {
  console.log(element)
  $timeout(function(){
    $(element).find('input[type=checkbox]').on('change', function () {
      scope.modelname = [];
      scope.$apply(function () {
        $(element).find('input[type=checkbox]:checked').each(function () {
          scope.modelname.push($(this).val());
        })
      })
    })

  },0);

}

我建议您在输入中使用ng-change和ng-model，并以更Angular的方式执行所有操作。您应该知道使用transclude的指令中的范围可能会以您期望的方式工作。

Angular指令不使用ng-repeat

2 个答案: