Tôi hiện đang học AngularJS và đang gặp khó khăn trong việc hiểu sự khác biệt giữa ng-bindvà ng-model.
Bất cứ ai có thể cho tôi biết chúng khác nhau như thế nào và khi nào nên sử dụng cái này hơn cái kia?
Tôi hiện đang học AngularJS và đang gặp khó khăn trong việc hiểu sự khác biệt giữa ng-bindvà ng-model.
Bất cứ ai có thể cho tôi biết chúng khác nhau như thế nào và khi nào nên sử dụng cái này hơn cái kia?
Câu trả lời:
ng-bind có ràng buộc dữ liệu một chiều ($ scope -> view). Nó có một phím tắt {{ val }}
hiển thị giá trị phạm vi $scope.valđược chèn vào html với valtên biến.
ng-model dự định được đặt bên trong các phần tử biểu mẫu và có ràng buộc dữ liệu hai chiều ($ scope -> view and view -> $ scope), vd <input ng-model="val"/>.
câu trả lời của tosh đi vào trung tâm của câu hỏi độc đáo. Dưới đây là một số thông tin bổ sung ....
ng-bindvà ng-modelcả hai đều có khái niệm chuyển đổi dữ liệu trước khi xuất dữ liệu cho người dùng. Cuối cùng, ng-bindsử dụng các bộ lọc , trong khi ng-modelsử dụng các trình định dạng .
Với ng-bind, bạn có thể sử dụng bộ lọc để chuyển đổi dữ liệu của mình. Ví dụ,
<div ng-bind="mystring | uppercase"></div>,
hoặc đơn giản hơn:
<div>{{mystring | uppercase}}</div>
Lưu ý rằng đó uppercaselà bộ lọc góc tích hợp , mặc dù bạn cũng có thể xây dựng bộ lọc của riêng mình .
Để tạo một trình định dạng mô hình ng, bạn tạo một lệnh thực hiện require: 'ngModel', cho phép lệnh đó có quyền truy cập vào ngModel controller. Ví dụ:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}Sau đó, một phần của bạn:
<input ngModel="mystring" my-model-formatter />Điều này về cơ bản là ng-modeltương đương với những gì uppercase bộ lọc đang làm trong ng-bindví dụ trên.
Bây giờ, nếu bạn có kế hoạch cho phép người dùng thay đổi giá trị mystringthì sao? ng-bindchỉ có một cách ràng buộc, từ mô hình -> xem . Tuy nhiên, ng-modelcó thể liên kết từ chế độ xem -> mô hình có nghĩa là bạn có thể cho phép người dùng thay đổi dữ liệu của mô hình và sử dụng trình phân tích cú pháp, bạn có thể định dạng dữ liệu của người dùng theo cách hợp lý. Đây là những gì trông giống như:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}Chơi với một plunker trực tiếp của các ng-modelví dụ về trình định dạng / trình phân tích cú pháp
ng-modelcũng có xác nhận tích hợp. Chỉ cần sửa đổi chức năng $parsershoặc $formatterschức năng của bạn để gọi chức năng của ngModelcontroller.$setValidity(validationErrorKey, isValid) .
Angular 1.3 có một mảng trình xác nhận $ mới mà bạn có thể sử dụng để xác thực thay vì$parsershoặc$formatters.
Lệnh này thực thi ở mức ưu tiên 1.
Ví dụ Plunker
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 chịu trách nhiệm:
Lệnh này thực thi ở mức ưu tiên 0.
Ví dụ Plunker
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 chịu trách nhiệm:
Nếu bạn đang do dự giữa việc sử dụng ng-bindhoặc ng-model, hãy thử trả lời những câu hỏi sau:
Bạn chỉ cần hiển thị dữ liệu?
Có: ng-bind (ràng buộc một chiều)
Không: ng-model (ràng buộc hai chiều)
Bạn có cần liên kết nội dung văn bản (và không giá trị)?
Đúng: ng-bind
Không: ng-model (bạn không nên sử dụng ng-bind khi yêu cầu giá trị)
Thẻ của bạn có phải là HTML
<input>không?
Có: ng-model (bạn không thể sử dụng ng-bind với <input>thẻ)
Không: ng-bind
mô hình ng
Chỉ thị ng-model trong AngularJS là một trong những thế mạnh lớn nhất để liên kết các biến được sử dụng trong ứng dụng với các thành phần đầu vào. Điều này hoạt động như ràng buộc dữ liệu hai chiều. Nếu bạn muốn hiểu rõ hơn về các ràng buộc hai chiều, bạn có một thành phần đầu vào và giá trị được cập nhật vào trường đó phải được phản ánh trong phần khác của ứng dụng. Giải pháp tốt hơn là liên kết một biến với trường đó và xuất ra biến đó bất cứ nơi nào bạn muốn hiển thị giá trị được cập nhật thông qua ứng dụng.
liên kết
ng-bind hoạt động khác nhiều so với ng-model. ng-bind là một cách liên kết dữ liệu được sử dụng để hiển thị giá trị bên trong thành phần html dưới dạng HTML bên trong. Lệnh này không thể được sử dụng để liên kết với biến mà chỉ với nội dung các phần tử HTML. Nguyên vẹn điều này có thể được sử dụng cùng với ng-model để liên kết thành phần với các thành phần HTML. Lệnh này rất hữu ích để cập nhật các khối như div, span, v.v. với nội dung HTML bên trong.
Ví dụ này sẽ giúp bạn hiểu.
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>Chúng ta có thể sử dụng ng-bind với <p>để hiển thị, chúng ta có thể sử dụng phím tắt cho ng-bind {{model}}, chúng ta không thể sử dụng ng-bind với các điều khiển đầu vào html, nhưng chúng ta có thể sử dụng phím tắt cho ng-bind {{model}}các điều khiển đầu vào 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>