2012-12-12 3 views
1

기본적으로 템플릿을 채우기 위해 2 개의 입력 필드가있는 문자 카운터를 만듭니다. 문제는 필드 중 하나가 선택적이며, 선택되면 char 카운트에 추가되는 상용구 텍스트를가집니다. 그래서 가장 큰 문제는 두 입력 영역에서 문자열의 길이를 얻는 것입니다. 모델이 변경되면 렌더링 메서드가 실행되지 않습니다. 나는 그것이 왜에 있는지 꽤 혼란 스럽다.모델이 업데이트 될 때 렌더링 메서드가 실행되지 않음

var $scope; 
var app = angular.module('miniapp', []); 

function Ctrl($scope) { 
    $scope.form = {} 
} 

app.directive('charcount', function(){ 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     link: function (scope, el, attrs, controller){ 
      controller.$render = function(){ 
       var data = controller.$modelValue 
       var codeLen = 0, descLen = 0; 
       if (data.code){ 
        codeLen = data.code.length 
       } 
       if (data.desc){ 
       descLen = data.desc.length 
       } 
       console.log(descLen, codeLen);      
      }    
     } 
    } 
}) 

바이올린 : 나는 렌더링 $ 을 사용한 적이하지만 에서 textInput에 함수를 호출 countChange에게 텍스트의 길이를 계산하는 함수를 만드는 NG 변화를 사용 http://jsfiddle.net/dj6mX/481/

답변

1

. HTML에서

예는 지침에

<div ng-app="miniapp"> 
    <div ng-controller="Ctrl"> 
    <form> 
     <label for="desc">Description</label> 
     <textarea ng-change="countChange()" id="desc" ng-model="form.desc"></textarea> 
     <charcount ng-model="form"> 
     <label for="code">Code</label> 
     <input id="code" ng-change="countChange()" ng-model="form.code"/>    
    </form> 
    <p id="preview">Some filler text here user input {{form.desc}} 
     <span ng- show="form.code"> 
     Some optional text here plus code {{form.code}} 
     </span> 
    </p> 
    </div> 
</div>​ 

var app = angular.module('miniapp', []); 

function Ctrl($scope) { 

} 

app.directive('charcount', function(){ 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
      controller: function($scope) {    
       $scope.countChange= function() { 
        var codeLen = 0; 
        var descLen = 0;      
        if($scope.form.desc){ 
        descLen = $scope.form.desc.length; 
        } 
        if($scope.form.code){ 
        codeLen = $scope.form.code.length; 
        } 
        console.log(codeLen,descLen);  
       } 

      },   
     link: function (scope, el, attrs, controller){ 

     }  
}}) 

sory 내가 영어 나쁜거야하지만 난이 도움이되기를 바랍니다. XD

관련 문제