javascript - since - ng model angular 6




AngularJS-كيفية تغيير قيمة ngModel في التوجيه المخصص؟ (4)

لنلقي نظرة على التوجيه الخاص بي:

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?

لذلك ، كيف يمكنني تغيير قيمة نموذج نانوغرام؟


إليك أفضل تفسير واجهته. لقد ساعدني ذلك كثيرًا من الوقت ، ويجمع تفاصيل من عدد من الإجابات الأخرى هنا.

نصيحة: كن حريصًا على قراءة المقالة بأكملها بدلاً من إزالتها ، وإلا فقد تفقد بعض الأجزاء الرئيسية!

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


للعمل مع تعبيرات الربط المعقدة ، يجب عليك استخدام خدمة $parse وطريقة assign .

لمزيد من المعلومات ، شاهد هذا الفيديو من ng-conf - كل شيء عن الأشياء الرائعة التي يمكنك القيام بها من خلال توجيه طراز ng: 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));
            }
        };
    }
]);

هذا يعمل من أجل DatePicker على موقعي

link: function(scope, elem, attrs, ngModel) {
         scope.$apply(function(){
             ngModel.$viewValue = value;
         }
} 

هناك طرق مختلفة للقيام بذلك:

  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
        }
 ...

LINKS:





angularjs-model