2016-08-07 3 views
3

내가AngularJS와 입력 범위 NG-모델

$scope.svgConfig = { 
    text:'', 
    textConfig: { 
     fontSize: 20 
    }, 
    rectConfig: [] 
}; 

가 링크, 여기에 변화를 잡으려고 노력 같은 개체를 가지고 내 컨트롤러에서 그

<input type="range" min="10" max="100" ng-model="svgConfig.textConfig.fontSize" /> 

처럼 내 지시를 얻었다 변경 감지 할 수없는 시계 그러나 아무 일도 일어나지 않습니다.

var setDomBindings = function($scope, $element, $attrs){ 

    $scope.$watch('svgConfig.textConfig.fontSize', function() { 
     var domText = $element.find('text'), 
      textExample = domText.last()[0], 
      dataText = $scope.svgConfig.text; 

     debugger; //haven't even been reached! 

     if($.isEmptyObject(textExample) && domText.length === 0 && dataText === 0){ 
      $scope.clearSvgRectConfig(); 
      return; 
     } 

     $scope.setSvgRectConfig(textExample, domText.length); 
    }); 
}; 

/* 
* Retruns initialized DOM element 
*/ 
return { 
    restrict: 'E', 
    templateUrl: './app/shared/imageTextEditor/imageTxtSvgView.html', 
    controller: 'imageTxtSvgController', 
    transclude: true, 
    link: setDomBindings 
}; 
+0

바인딩이'svgConfig.textConfig.fontSize'에 있지만 시계가'svgConfig.fontSize'에 있습니다. 이것은 오타이거나 질문 본문에 코드를 잘못 번역 한 것입니까? – Claies

+0

@Claies typo, 죄송합니다. – DanilGholtsman

+0

이제 알았습니다. '$ watch'는 이상한 구문을 가지고 있으며, 각도 인식 기능이 아닌'$ element'를 사용하고있는 것으로 보입니다. – Claies

답변

1

이 기능은 태그 이름/CSS 선택기로 요소를 찾지 않습니다. 태그 이름별로 조회하려면 angle.element (document) .find (...) 또는 $ document.find()를 대신 사용해 보거나 표준 DOM API를 사용하십시오. document.querySelectorAll() children(), contents() 및 data() 구현에 액세스 할 수 있으므로 일반적으로 그 방법을 찾을 수 있습니다.

+0

글쎄요. 요소 이벤트와 같이 작동하도록 만들지 만, 아 ... DOM을 사용하여 실제로 작업하는 것을 좋아하지 않습니다. 어쩌면 내가 무언가를 놓칠 수도 있고 거기에 또 다른 많은 코드가 있는데 범위에 변경 사항을 적용하는 경우 – DanilGholtsman

+0

jquery를 각도에 추가하면 해당 함수를 사용할 수 있습니다. –

+0

이미 도착했습니다. 나는 새로운 재미있는 것이 없으면 나는 대답으로 당신의 게시물을 만들 것입니다 :) – DanilGholtsman