43

私のディレクティブを見てみましょう：

angular.module('main').directive('datepicker', [
function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, ngModel) {
            ngModel.$modelValue = 'abc'; // this does not work
            // how do I change the value of the model?

では、どうすれば ng-model の値を変更できますか?

4

5 に答える 5

54

それにはさまざまな方法があります。

  1. $setViewValue()ビューとモデルを更新します。ほとんどの場合、それで十分です。
  2. モデルからビューを切り離したい場合 (例えば、モデルは数値ですが、ビューは千単位の区切り文字を含む文字列です) に直接アクセスして$viewValue、$modelValue
  3. の内容も上書きしたい場合ng-model(例えば、ディレクティブは小数点以下の桁数を変更し、モデルも更新します)、ngModel: '='スコープに注入して設定しますscope.ngModel

例えば

  return {
     restrict: 'A',
     require: 'ngModel',
     scope: {
         ngModel: '='
     },
     link: function (scope, element, attrs, ngModelCtrl) {

        function updateView(value) {
            ngModelCtrl.$viewValue = value;
            ngModelCtrl.$render(); 
        }

        function updateModel(value) {
            ngModelCtrl.$modelValue = value;
            scope.ngModel = value; // overwrites ngModel value
        }
 ...

リンク:

于 2015-08-05T08:35:27.737 に答える
31

複雑なバインディング式を扱うには、 $parseサービスとassignメソッドを使用する必要があります。

詳細については、ng-conf のこのビデオをご覧ください。これは、ng-model ディレクティブを使用して実行できる優れた機能に関するものです: https://www.youtube.com/watch?v=jVzymluqmg4

app.directive('datepicker', ['$parse',
    function($parse) {
        return {
            require: '?ngModel',
            link: function(scope, element, attributes, controller) {
                // $parse works out how to get the value.
                // This returns a function that returns the result of your ng-model expression.
                var modelGetter = $parse(attributes['ngModel']);
                console.log(modelGetter(scope));

                // This returns a function that lets us set the value of the ng-model binding expression:
                var modelSetter = modelGetter.assign;

                // This is how you can use it to set the value 'bar' on the given scope.
                modelSetter(scope, 'bar');

                console.log(modelGetter(scope));
            }
        };
    }
]);
于 2014-03-26T10:52:15.777 に答える
1

これDatePickerは私のサイトで機能します

link: function(scope, elem, attrs, ngModel) {
         scope.$apply(function(){
             ngModel.$viewValue = value;
         }
}
于 2015-05-29T18:55:34.287 に答える
1

これが私が遭遇した最良の説明です。これは私を大いに助け、ここにある他の多くの回答から詳細をまとめました.

ヒント: 記事をざっと読むのではなく、記事全体を読むように注意してください。

https://www.nadeau.tv/post/using-ngmodelcontroller-with-custom-directives/

于 2016-06-14T22:07:50.910 に答える