Köşeli ng model dinamik alıcılar ve ayarlayıcılar

Ng-modelini harici bir model-servis ile kullanmak istiyorum. Bu modelin iki yöntemi vardır: getValue (variable) ve setValue (variable).

Yani html'de yapabilmek istiyorum:

<input type="text" ng-model="balance">

Not: Denetleyicimde $ kapsamında denge tanımlanmadı. Ve 4000'den fazla farklı değişkenle uğraştığımız için hepsini kapsamda tanımlamak istemiyorum.

Ve sonra değişimde, modelin setValue() yöntemini çağırmalıdır. Yani denetleyicimde şöyle bir şey olmasını isterim:

$catchAllGetter = function(variable) {//e.g. variable = 'balance'
     var value = Model.getValue(variable);
     return value;
}

$catchAllSetter = function(variable, value) {//called on change
     Model.setValue(variable, value);
}

Angular ile böyle bir şey mümkün mü?

5
Bu jsfiddle.net/BDyAs/12 adresine bir göz atın.
katma yazar Reena, kaynak
Bunun yardımcı olacağını düşünmüyorum ...
katma yazar Bob, kaynak

7 cevap

Yaklaşımım, Prince Prince'e benziyor, ancak uygulama biraz farklı.

Model değişkeninin adını kabul eden bir yönerge oluşturun ve ardından alma ve ayarı gerçekleştirmek için model hizmetini yönergenin kendisinde enjekte edin.

Düzenleme: @Werlang tarafından belirtildiği gibi, değiştirilen bir özellik yazılır   ngModel, doğrulama, biçimlendirme,   debounced update, ng-change vb.   bunun yerine ek bir öznitelik oluşturacağız

.

    app.directive('dynamicInput', function() {
      return {
        restrict: 'A',
        link: function(scope, el, attr) {
              scope.variableName = angular.copy(attr.ngModel);//Saving the variable name

              scope[attr.ngModel] = (attr.ngModel + '_1');//Setting a dummy value in the scope variable.
             //In your case it will look something like scope[attr.ngModel] = Model.getValue(attr.ngModel);

                scope.$watch(attr.ngModel, function(newValue, oldValue) {

                  console.log(scope.variableName + " ==> " + newValue);

                  //Model.setValue(scope.variableName, newValue);

              });

        }
      };
    })

Sonra HTML'inizde:

    <input ng-model='balance' dynamic-input />
3
katma
Bu şekilde, doğrulama, biçimlendirme, geri gelen güncelleme, ng-değiştirme vb.
katma yazar André Werlang, kaynak
@ TechMa9iac düzenleme için teşekkürler, güzel bir çözüm gibi görünüyor! Bugün deneyeceğim.
katma yazar Jan-Paul Kleemans, kaynak

Bu davranışı uygulayan yeni bir yönerge oluşturabilirsiniz.

<input model-getter='getFn()' model-setter='setFn($value)' />

Bu uygulamak için oldukça basit olacaktır:

app.directive('modelGetter', function() {
  return {
    restrict: 'A',
    scope: {
      get: '&modelGetter',
      set: '&modelSetter'
    },
    link: function(scope, element) {
      element.val(scope.get());
      element.on('change', function() {
        var val = element.val();
        scope.set({ $value: val });
      });
    }
  };
})
1
katma
Bu şekilde, doğrulama, biçimlendirme, geri gelen güncelleme, ng-değiştirme vb.
katma yazar André Werlang, kaynak

Örnek 'e bakın, sizin için oluşturdum. Umarım doğru anladım

$scope.$watch('variables', function(newValue) {
  console.log("triggers on variables change");
  angular.forEach(newValue, function(value, key) {
    Model.setValue(key, value);
  });  
}, true);
1
katma

ngModel supports getter and setters. Here's how it works:

<input ng-model="balance" ng-model-options="{ getterSetter: true }">

Bu, balance bir alıcı/ayarlayıcı işleviyse çalışır:

$scope.balance(100);     //sets 100
var b = $scope.balance();//returns 100

Her değişkeni kapsamda sergilemenize gerek yoktur; örneğin, örneğinizde kullandığınız Model hizmetini gösterebilirsiniz:

$scope.Model = Model;

Ardından, Görünümde, ihtiyacınız olan her şeye bağlanın:

<input ng-model="Model.balance" ng-model-options="{ getterSetter: true }">
0
katma

Tüm değişkenlerinizin bir nesne dizisinde var:

[
  {key: "Variable 1", value: 1, kind: "number"},
  {key: "Variable 2", value: "some text", kind: "text"},
  {key: "Variable 3", value: new Date(), kind: "date"}
]

Sonra görüşünüze göre onları bir ng-repeat yardımıyla yaratabilirsiniz:

<div ng-repeat="variable in myVariables">
    <input type="{{variable.kind}}" ng-model="variable.value" ng-change="changed(variable)">
</div>

Harici servisinizi güncellemeniz gerekiyorsa, kontrol cihazınızda değiştirilmiş bir yöntem (değişken) uygulayın.

0
katma

Model işlevinizi dinamik olarak değerlendirebilirsiniz, örn.

<input type="text" ng-model="myModel(var)">

Ve kontrolörde:

$scope.myModel = function(var) {
  return function(newValue) {
    //this is a regular model function but you can use 'var' here
     ...
  }
}
0
katma

ES5 Kurtarma için nesne özellikleri:

Object.defineProperty($scope, 'balance', {
  enumberable: true,
  get: function() {
   //-- call your getter here
  },
  set: function (val) {
   //-- call the setter here
  }
});

Bu doğal Javascript, bu yüzden bundan daha hızlı olmaz.

0
katma