2015-01-10 6 views
1

ng-model 지시문에서 바인딩 표현식을 동적으로 변경할 수 있습니까?지시어를 사용하여 Angular JS에서 모델 바인딩을 동적으로 변경 하시겠습니까?

이 I'am이 성취하려는 것입니다 :

나는 처음에 값을 제시한다 입력 필드가 (사용자가 얼마 전에 입력 한 값에 기반을 -> "repetitions.lastTime"). 이 값은 초기에 바인딩되어야합니다. 그런 다음 사용자가 입력 필드를 클릭하면 제안 된 값을 범위의 다른 속성 ("repetitions.current")에 복사해야합니다. 이제부터 입력 필드는 "repetitions.current"에 바인딩되어야합니다.

편집 Plunker : http://plnkr.co/edit/9EbtnEYoJccr02KYUzBN?p=preview

HTML

<mo-repetitions mo-last-time="repetitions.lastTime" mo-current="repetitions.current"></mo-repetitions> 

<p>current: {{repetitions.current}}</p> 
<p>last time: {{repetitions.lastTime}}</p> 

자바 스크립트

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

app.controller('MainCtrl', function($scope) { 
    $scope.repetitions = { 
     lastTime : 5, 
     current : 0 
    }; 
}); 

app.directive('moRepetitions', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
      moLastTime : "=", 
      moCurrent : "=" 
     }, 
     link: function (scope, element, attrs, ngModel) { 
      element.css("color", "gray"); 
      scope.activated = false; 

      scope.activate = function() { 
       if (scope.activated) 
       return; 
       else 
       scope.activated = true; 

       element.css("color", "black"); 

       scope.moCurrent = scope.moLastTime; 

       //This is not working, because it apparently comes too late: 
       attrs['ngModel'] = 'moCurrent'; 
      }; 
     }, 
     template: '<input ng-model="moLastTime" ng-click="activate()" type="number" />', 
     replace: true 
    }; 
}]); 

사람이 바른 길에 날 지점 수 있습니까?

+0

가 왜 moCurrent에 NG 모델을 설정하지 않는 만든 그냥 NG-초기화를 사용 moLastTime에 대한 초기 값을 설정? – Alborz

답변

1

plnkr

element.attr('ng-model', 'moCurrent'); 
$compile(element)(scope); 
+0

감사합니다. 예상대로 작동합니다. 부모 요소에 의존하지 않도록 솔루션을 약간 변경했습니다. 'element.attr ('ng-model', 'moCurrent'); var clonedElement = $ compile (element) (scope, function (clonedElement, scope)) { element.replaceWith (clonedElement); clonedElement [0] .focus(); }); – martinoss

관련 문제