Angular指令不适用于ng-repeat

马修·卢修斯(LuciusMA)

我创建了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>
埃德明森

问题在于,在您绑定到更改事件的那一点上,angular尚未呈现ng-repeat。如果您设置了超时时间以渲染所有内容,那么它应该可以正常工作。

这是一个正在工作的柱塞

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,并以更角度的方式进行所有操作。您应该意识到使用transclude的指令中的作用域可能会按您期望的方式工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ng-repeat范围不适用于其中的指令

来自分类Dev

angularjs-ng-repeat仅适用于$ index

来自分类Dev

Angular js ng-repeat不适用于服务器响应

来自分类Dev

AngularJS:指令模板中的数据绑定不适用于ng-repeat

来自分类Dev

ng-click内部ng-repeat不适用于:focus和display

来自分类Dev

Angular ng-repeat不适用于我的数组

来自分类Dev

ng-repeat和ng-switch不适用于同一元素

来自分类Dev

Angular的ng include指令不适用于预期的链接

来自分类Dev

AngularJs ng-repeat order不适用于嵌套对象属性

来自分类Dev

离子滑盖盒不适用于ng-repeat

来自分类Dev

ng-repeat不适用于表<tr>,但适用于列表<li>

来自分类Dev

ng-click with ng-repeat不适用于直接表达式(非函数)

来自分类Dev

筛选器不适用于动态输入和ng-repeat

来自分类Dev

JSON解析不适用于ng-repeat

来自分类Dev

ng-selected不适用于ng-repeat设置默认值

来自分类Dev

在我的情况下,href不适用于ng-repeat

来自分类Dev

Angular js ng-repeat不适用于服务器响应

来自分类Dev

ng-click内部ng-repeat不适用于:focus和display

来自分类Dev

ng-repeat不适用于json值

来自分类Dev

Angular的ng include指令不适用于预期的链接

来自分类Dev

数据绑定不适用于嵌套ng-repeat

来自分类Dev

ng-repeat过滤器不适用于重复变量分配

来自分类Dev

输入为制表符指令不适用于ng-repeat生成的输入字段

来自分类Dev

angularJS ng-repeat过滤器不适用于动态字段

来自分类Dev

溢出-不适用于ng-repeat

来自分类Dev

AngularJS-ng-repeat不适用于单个数组吗?

来自分类Dev

ng-repeat 不适用于对象的对象

来自分类Dev

“控制器为”不适用于 ng-repeat

来自分类Dev

带有 ng-repeat 的角度选择不适用于 json 对象

Related 相关文章

热门标签

归档