2015-01-13 11 views
17

角バージョン1.3.8にアップグレードしました。AngularJS ng-model-options getter-setter

バージョン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'); 
      }); 
     } 
    }; 
}]); 

});

私が見結合におけるゲッターとセッターがサポートされるようになりましたが、私は両方ゲッターセッターを使用する方法をどこにも見つけることができませんhere。それを行う方法はありますか?つまり、convert-directiveをng-model-optionsに置き換えることができますか?

おかげ

答えて

32

ドキュメントは少しあいまいに見えるかもしれませんが、使い方は非常に簡単です。場合は、JSコントローラで

<input ng-model="pageModel.myGetterSetterFunc" 
ng-model-options=" {getterSetter: true }"> 
  • 、代わりに実際のモデルの値を返す(+ストリッピング適用)する関数を作成します。

    1. HTMLを:あなたがする必要がどのような パラメーターが送信された場合、パラメーターは送信されず、モデルを更新します(+他の変更を適用します)。

    ゲッター/セッターは基本的に、ビュー値とモデル値の間の別の「レイヤー」です。

    例:

    $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('...') 
        ); 
        } 
    } 
    

    DEMOのPLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

    (コンソールチェック - http://screencast.com/t/3SlMyGnscl)を

    注:それはどのように見るのは興味深いだろうだろう再利用性の点ではこのスケール。これらのゲッタ/セッタを外部化された再利用可能なメソッドとして作成し、それらのジェネレータを持たせることをお勧めします(それぞれのケースでデータモデルが異なるため)。コントローラでは、これらのジェネレータだけを呼び出すことができます。ちょうど私の2セント。

  • +3

    https://github.com/angular/angular.js/issues/11361(gkalpakのコメント)を参照してください。「isDefined」ではなく「arguments.length」を使用するとよいでしょう。 – TrueWill

    +0

    それは私のトラブルから私を助けた –

    3

    この質問はかなり古いです - しかし、IE9 +(そしてもちろん他のすべての関連するブラウザ)のためにあなたは私がNG-モデルのgetterSetterオプションに対して希望のECMAScript 5ゲッター/セッターMethodeのを使用することができます。

    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/