ฉันกำลังเรียนรู้ AngularJS และกำลังมีปัญหาในการทำความเข้าใจความแตกต่างระหว่างและng-bindng-model
ใครสามารถบอกฉันว่าพวกเขาแตกต่างกันอย่างไรและเมื่อใดควรใช้กับอีกอันหนึ่ง
ฉันกำลังเรียนรู้ AngularJS และกำลังมีปัญหาในการทำความเข้าใจความแตกต่างระหว่างและng-bindng-model
ใครสามารถบอกฉันว่าพวกเขาแตกต่างกันอย่างไรและเมื่อใดควรใช้กับอีกอันหนึ่ง
คำตอบ:
ng-bindมีการเชื่อมโยงข้อมูลทางเดียว ($ scope -> view) มันมีทางลัด{{ val }}
ที่แสดงค่าขอบเขตที่$scope.valแทรกลงใน html ซึ่งvalเป็นชื่อตัวแปร
NG-รุ่นมีวัตถุประสงค์ที่จะใส่ในองค์ประกอบของรูปแบบและมีข้อมูลแบบสองทางที่มีผลผูกพัน ($ ขอบเขต -> มุมมองและมุมมอง -> $ ขอบเขต) <input ng-model="val"/>เช่น
คำตอบของtoshคือหัวใจของคำถามนี้ นี่คือข้อมูลเพิ่มเติมบางส่วน ....
ng-bindและng-modelทั้งสองมีแนวคิดของการแปลงข้อมูลก่อนที่จะส่งออกสำหรับผู้ใช้ ไปสิ้นสุดที่ng-bindใช้ฟิลเตอร์ในขณะที่ng-modelใช้จัดรูปแบบ
ด้วยng-bindคุณสามารถใช้ตัวกรองเพื่อแปลงข้อมูลของคุณ ตัวอย่างเช่น,
<div ng-bind="mystring | uppercase"></div>,
หรือมากกว่านั้น:
<div>{{mystring | uppercase}}</div>
ทราบว่าuppercaseเป็นในตัวกรองเชิงมุมถึงแม้ว่าคุณยังสามารถสร้างตัวกรองของคุณเอง
ในการสร้างฟอร์แมตฟอร์แมต ng คุณสร้างไดเรกทีrequire: 'ngModel'ฟที่อนุญาตให้ไดเร็กตอรี่นั้นเข้าถึง ngModel controllerได้ ตัวอย่างเช่น:
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สามารถผูกจากview -> modelซึ่งหมายความว่าคุณอาจอนุญาตให้ผู้ใช้เปลี่ยนข้อมูลของ model และการใช้parserคุณสามารถจัดรูปแบบข้อมูลของผู้ใช้ได้อย่างคล่องตัว นี่คือสิ่งที่ดูเหมือนว่า:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}เล่นกับ live plunker ของng-modelตัวอย่างตัวจัดรูปแบบ / ตัวแยกวิเคราะห์
ng-modelยังมีการตรวจสอบในตัว เพียงแค่ปรับเปลี่ยนของคุณ$parsersหรือ$formattersฟังก์ชั่นที่จะเรียกngModelของcontroller.$setValidity(validationErrorKey, isValid)ฟังก์ชั่น
เชิงมุม 1.3 มีอาร์เรย์ใหม่ $ validatorsซึ่งคุณสามารถใช้สำหรับการตรวจสอบแทนหรือ$parsers$formatters
คำสั่งนี้ดำเนินการที่ระดับความสำคัญ 1
ตัวอย่างพลั่ว
JAVASCRIPT
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);CSS
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}HTML
<p id="inputDescription">
Update input to see transitions when valid/invalid.
Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
aria-describedby="inputDescription" />
</form>ngModel รับผิดชอบ:
คำสั่งนี้ดำเนินการที่ระดับความสำคัญ 0
ตัวอย่างพลั่ว
JAVASCRIPT
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);HTML
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>ngBind รับผิดชอบ:
หากคุณลังเลระหว่างการใช้ng-bindหรือng-modelพยายามตอบคำถามเหล่านี้:
คุณเพียงต้องแสดงผลข้อมูล?
ใช่: ng-bind (เข้าเล่มแบบทางเดียว)
ไม่: ng-model (ผูกสองทาง)
คุณต้องการผูกเนื้อหาข้อความ (และไม่ใช่ค่า)?
ใช่: ng-bind
ไม่: ng-model (คุณไม่ควรใช้ ng-bind เมื่อต้องการค่า)
แท็กของคุณเป็น HTML
<input>หรือไม่
ใช่: ng-model (คุณไม่สามารถใช้ ng-bind with <input>tag)
No: ng-bind
NG-รุ่น
ng-model directive ใน AngularJS เป็นหนึ่งในจุดแข็งที่ยิ่งใหญ่ที่สุดในการผูกตัวแปรที่ใช้ในแอปพลิเคชันที่มีส่วนประกอบอินพุต วิธีนี้ทำงานเป็นการรวมข้อมูลสองทาง หากคุณต้องการทำความเข้าใจเกี่ยวกับการผูกสองทางให้ดีขึ้นคุณจะต้องมีองค์ประกอบอินพุตและค่าที่อัปเดตลงในฟิลด์นั้นในส่วนอื่น ๆ ของแอปพลิเคชัน ทางออกที่ดีกว่าคือการผูกตัวแปรกับฟิลด์นั้นและเอาท์พุทตัวแปรนั้นเมื่อใดก็ตามที่คุณต้องการแสดงค่าที่อัพเดตผ่านแอปพลิเคชัน
NG-ผูก
ng-bind ทำงานแตกต่างจาก ng-model มาก ng-bind คือการเชื่อมโยงข้อมูลทางเดียวที่ใช้สำหรับการแสดงค่าภายในคอมโพเนนต์ html เป็น HTML ภายใน คำสั่งนี้ไม่สามารถใช้สำหรับผูกกับตัวแปร แต่จะใช้กับเนื้อหาองค์ประกอบ HTML เท่านั้น Infact สามารถใช้ร่วมกับ ng-model เพื่อผูกส่วนประกอบกับองค์ประกอบ HTML คำสั่งนี้มีประโยชน์มากสำหรับการอัปเดตบล็อกเช่น div, span ฯลฯ ด้วยเนื้อหา HTML ภายใน
ตัวอย่างนี้จะช่วยให้คุณเข้าใจ
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>ngModelมักจะใช้สำหรับแท็กอินพุตสำหรับผูกตัวแปรที่เราสามารถเปลี่ยนตัวแปรจากหน้าควบคุมและ html ได้ แต่ngBindใช้สำหรับแสดงตัวแปรในหน้า html และเราสามารถเปลี่ยนตัวแปรจากคอนโทรลเลอร์และ html เพียงแสดงตัวแปร
เราสามารถใช้ 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>