ng-repeat로 작동하지 않는 각도 명령

각도 명령을 만들었지 만 ng-repeat으로 실행되지 않습니다. 나는 이유를 모른다. 두 번째 지시문이 성공적으로 실행됩니다.ng-repeat로 작동하지 않는 각도 명령

자바 스크립트 :

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>

출처

2014-07-25 LuciusMA

stackoverflow에 오신 것을 환영합니다. 가독성을 높이기 위해 코드 샘플을 재구성하고 가장 관련성이 높은 부분까지 끈 다음 게시에 명확한 질문이 포함되어 있는지 확인하십시오 – Sprottenwels

문제는 변경 이벤트에 바인딩하는 시점에서 angular가 ng-repeat를 아직 렌더링하지 못했기 때문입니다. 타임 아웃을하면 모든 일을 렌더링 할 시간을줍니다. 여기

은 내가 더 각도 방식으로 입력에 NG-변화와 NG-모델을 사용하고 모든 일을 당신을 추천 할 것입니다 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); 

}

작업. 여러분은 transclude를 사용하는 지시어의 범위가 예상대로 작동 할 수 있음을 알고 있어야합니다.

출처

2014-07-25 09:29:04 Edminsson

당신의 도움에 감사드립니다! 각도 데모가있는 사이트를 추천 해 주시겠습니까? 다시 TKS! – LuciusMA

당신의 컨트롤러에 $ timeout을 주입하는 것을 잊어라 : .controller ('Ctrl', [ '$ scope', '$ timeout', function ($ scope, $ timeout) – Edminsson

나는 Plunker http://plnkr.co/edit/Vh4KxPxJyEsaOPrK38sV?p=preview에서 코드를 실행하고 대신 value="{{data.text}}"을 설정해야한다는 점을 제외 내가 어떤 문제를 보지 않았다 value="data.text" 첫 번째 지시문을 두 번째 지시문처럼 보이게하려면 레이블에 span을 추가했습니다.

출처

2014-07-25 09:16:27 ex0ns

감사합니다. 그것에 대해 코드를 공유 할 수 있습니까? 나는 당신의 방법으로 작동하게 만들 수 없습니다. – LuciusMA

ng-repeat로 작동하지 않는 각도 명령

답변

관련 문제