AngularJS ng-model-options getter-setter

Question

각도 버전 1.3.8로 업그레이드했습니다.

버전 1.2.23을 사용할 때 데이터 양식보기를 모델 및 부절로 변환하는 지시문을 만들었습니다.

이

내 지시어입니다 :

.directive('dateConverter', ['$filter', function ($filter) { 

    return { 

     require: 'ngModel', 

     link: function (scope, element, attrs, ngModelController) { 

      // Convert from view to model 
      ngModelController.$parsers.push(function (value) { 
       return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss') 
      }); 

      // Convert from model to view 
      ngModelController.$formatters.push(function (datetime) { 
       return $filter('date')(datetime, 'MM/dd/yyyy'); 
      }); 
     } 
    }; 
}]); 

});

내가 볼 바인딩에서 getter 및 setter가 지원됩니다,하지만 난 모두 게터 및 setter를 사용하는 방법을 어디서든 찾을 수 없습니다 here. 그것을 할 방법이 있습니까? 즉, convert-directive를 대체 할 수 있습니까?

감사

Answer 1

문서는 약간 퍼지 보일 수도 있지만, 사용법은 매우 간단합니다. 당신이해야 할 일은 :

1. HTML :

   JS 컨트롤러에서

   <input ng-model="pageModel.myGetterSetterFunc" 
   ng-model-options=" {getterSetter: true }"> 
   

2. 대신 실제 모델의 값을 반환하는 함수를 작성 (+ 제거 적용)이있는 경우 매개 변수를 보내면 매개 변수가 전송되지 않으며 매개 변수가 전송되면 모델을 업데이트합니다 (+ 다른 변경 사항 적용).

기본적으로 getter/setters는 뷰 값과 모델 값 사이의 또 다른 "계층"입니다.

예 :

$scope.pageModel.firstName = ''; 
$scope.pageModel.myGetterSetterFunc: function (value) { 
    if (angular.isDefined(value)) { 
    $scope.pageModel.firstName = value + '...'; 
    } else {   
    return $scope.pageModel.firstName.substr(0, 
     $scope.pageModel.firstName.lastIndexOf('...') 
    ); 
    } 
} 

데모 PLUNKER : http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(콘솔 확인 - http://screencast.com/t/3SlMyGnscl를)

참고 :이 방식을 볼 수 재미있을 것이다 것 재사용의 관점에서이 규모. 이러한 getter/setter를 외부화 된 재사용 가능한 메서드로 만들고 해당 데이터 모델이 각 사례마다 다르므로 생성자를 사용하는 것이 좋습니다. 그리고 컨트롤러에서 그 발전기를 호출합니다. 단지 2 센트.

Answer 2

이 질문에 오히려 오래 -하지만 당신은 내가 NG 모델의 getterSetter 옵션에 대해 선호하는 것 인 ECMAScript 5 게터/세터 메도 사용할 수 있습니다 IE9 + (그리고 물론 다른 모든 관련 브라우저)에 대한 :

var person = { 
    firstName: 'Jimmy', 
    lastName: 'Smith', 
    get fullName() { 
     return this.firstName + ' ' + this.lastName; 
    }, 
    set fullName (name) { 
     var words = name.toString().split(' '); 
     this.firstName = words[0] || ''; 
     this.lastName = words[1] || ''; 
    } 
} 

person.fullName = 'Jack Franklin'; 
console.log(person.firstName); // Jack 
console.log(person.lastName) // Franklin 

을

이 예제는 http://javascriptplayground.com/blog/2013/12/es5-getters-setters/