2013-07-23 4 views
0

"bindto"속성을 기반으로 다음 확인란을 선택하거나 표시하지 않으려면 어떻게해야합니까? element.checked = true을 시도했지만 확인란을 선택하지 않았습니다. 어떤 제안?각도 지시문을 확인하지 않았습니다.

directive('slideToggle', function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope: { 
      bindto: '=' 
     }, 
     template: '<input type="checkbox" name=""/>', 
     link: function (scope, element, attrs) { 
      console.log(scope); //shows scope.bindto as "true" 
      console.log(scope.bindto); //undefined 
     } 
    } 
}). 

사용 : 범위가 부모 컨트롤러에 의해 업데이트되기 전에 지시가 연결되어 있기 때문에

<slide-toggle bindTo="myItem.active"></slide-toggle>

+0

이 bindTo의 CamelCase를 모두 소문자 bindto이 지침을 했어야 템플릿입니다 볼 수있는 체크 박스에 NG 모델 속성을 사용한다? –

답변

1

bindto는, 처음에 정의되어 있지 않습니다.

그것은 당신이 "범위"개체로 클릭하는 것이 걸린 시간 이후 "범위"에 콘솔에 "사실"로 나타납니다
link: function (scope, element, attrs) { 
    scope.$watch("bindto", function (newValue) { 
     console.log(scope.bindto); //undefined 
    }); 
} 

그것을 위해 충분히했다 : 당신은 범위의 변화를 경청 할 필요가 업데이트 할.

+0

이것이 올바른 동안, 나는 대답의 나머지 절반을 위해 @Ajay – Webnet

2

당신은 업데이트 된 코드

<body ng-controller="test" > 
      <input ng-model="myItem.active" /> 
     <slide-toggle bindto="myItem.active"></slide-toggle> 
      <script> 
       var app = angular.module('customControl', []) 
       app.controller('test', function ($scope) { 
        $scope.userContent = 'hello'; 
        $scope.myItem = { active: true }; 


       }); 

       app.directive('slideToggle', function() { 
        return { 
         replace: true, 
         restrict: 'E', 
         scope: { 
          bindto: '=bindto' 
         }, 
         template: '<input type="checkbox" ng-model= "bindto"/>', 
         link: function (scope, element, attrs) { 

         } 
        } 
       }) 
+0

+1에 의해 제안 된대로 'ng-model'을 사용해야했다. –

관련 문제