[Angularjs] ما الفرق بين ng-model و ng-bind


Answers

إجابة توتش تصل إلى قلب السؤال بشكل جيد. إليك بعض المعلومات الإضافية ....

الفلاتر والتنسيقات

ng-bind و ng-model كلاهما لديهما مفهوم تحويل البيانات قبل إخراجها للمستخدم. لتحقيق هذه الغاية ، يستخدم ng-bind الفلاتر ، بينما يستخدم ng-model التنسيق .

عامل التصفية (ng-bind)

باستخدام ng-bind ، يمكنك استخدام فلتر لتحويل بياناتك. فمثلا،

<div ng-bind="mystring | uppercase"></div> ،

أو أكثر ببساطة:

<div>{{mystring | uppercase}}</div>

لاحظ أن uppercase عبارة عن فلتر زاوي مدمج ، على الرغم من أنه يمكنك أيضًا إنشاء فلتر خاص بك .

المنسق (نموذج نانوغرام)

لإنشاء مُنَسِق ng-model ، يمكنك إنشاء أمر لا require: 'ngModel' ، والذي يسمح لهذا التوجيه بالوصول إلى controller ngModel. فمثلا:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

ثم في جزئية:

<input ngModel="mystring" my-model-formatter />

هذا هو أساسًا ما يعادل نظير ng-model ما يفعله عامل تصفية uppercase في المثال ng-bind أعلاه.

موزعي

الآن ، ماذا لو كنت تخطط للسماح للمستخدم بتغيير قيمة mystring ؟ ng-bind على طريقة ربط واحدة فقط ، من عرض النموذج ->. ومع ذلك ، يمكن أن يربط ng-model العرض -> النموذج الذي يعني أنه يمكنك السماح للمستخدم بتغيير بيانات النموذج ، وباستخدام محلل ، يمكنك تنسيق بيانات المستخدم بطريقة مبسطة. إليك ما يبدو كالتالي:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

لعب مع الغزاة الحية من الأمثلة المنسق / محلل ng-model

ماذا بعد؟

ng-model أيضا التحقق من الصحة المدمج. ببساطة قم بتعديل $parsers أو $formatters الخاص بك لاستدعاء controller.$setValidity(validationErrorKey, isValid) تعمل .

يحتوي Angular 1.3 على مصفوفات $ validators جديدة يمكنك استخدامها للتحقق من الصحة بدلاً من $parsers أو $formatters .

Angular 1.3 لديه أيضًا دعم getter / setter لـ ngModel

Question

أتعلم حاليًا AngularJS وأواجه صعوبة في فهم الفرق بين ng-bind و ng-model .

هل يمكن لأي أحد أن يقول لي كيف يختلفون ومتى يجب استخدام أحدهما على الآخر؟




يمكننا استخدام ng-bind مع <p> للعرض ، يمكننا استخدام الاختصار لـ ng-bind {{model}} ، لا يمكننا استخدام ng-bind مع عناصر التحكم في إدخال HTML ، ولكن يمكننا استخدام الاختصار لـ ng-bind {{model}} مع عناصر تحكم HTML في الإدخال.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>



إذا كنت تتردد في استخدام ngBind أو ng-model ، فحاول الإجابة عن هذه الأسئلة:

هل تحتاج فقط إلى عرض البيانات؟

  • نعم: ng-bind (رابط في اتجاه واحد)

  • لا: ng-model (رابط ثنائي الاتجاه)

هل تحتاج إلى ربط محتوى النص (وليس القيمة)؟

  • نعم: ng-bind

  • لا: ng-model (يجب عدم استخدام ng-bind حيث تكون القيمة مطلوبة)

هل علامتك هي HTML <input> ؟

  • نعم: ng-model (لا يمكنك استخدام ng-bind مع علامة الإدخال)

  • لا: ng-bind




angular.module('testApp',[]).controller('testCTRL',function($scope)
                               
{
  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
});
div input{
width:600px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>