اتصال داده (Data Binding)
اتصال داده یعنی هماهنگی مدل و نما. «مدل (Model)» همان داده هاست. «نما (View)» همان HTML دیده شده است. وقتی مدل عوض شود، نما سریع هماهنگ می شود. برعکسش هم برقرار است، مثل نمره دفتر و کارنامه.
مدل داده (Data Model)
معمولاً یک مدل ساده داریم. کنترلر مقداردهی را انجام می دهد.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = 'John';
$scope.lastname = 'Doe';
});
نمای HTML و نمایش داده
می توان با ng-bind متن عنصر را به مدل وصل کرد.
<p ng-bind="firstname"></p>
همچنین می توان از آکولادهای دوتایی برای نمایش استفاده کرد.
<p>First name: {{ firstname }}</p>
اتصال با ng-model
روی ورودی ها از ng-model استفاده کن. مقدار ورودی با مدل هماهنگ می شود.
<input ng-model="firstname">
بایندینگ دوطرفه (Two-Way)
با تغییر مدل یا نما، دیگری فوراً عوض می شود. این همزمانی خودکار است.
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{ firstname }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = 'John';
$scope.lastname = 'Doe';
});
<\/script>
نقش کنترلر (Controller)
کنترلر منطق را مدیریت می کند. نما فقط نتیجه مدل را نشان می دهد.
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{ firstname }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = 'John';
$scope.changeName = function() {
$scope.firstname = 'Nelly';
};
});
<\/script>
گام های عملی
- یک ماژول و کنترلر بساز.
- داده ها را در $scope مقداردهی کن.
- نمایش را با ng-bind یا {{ }} انجام بده.
- ورودی ها را با ng-model وصل کن.
نکته: برای ادامه اتصال داده در مباحث مرتبط، به مدل و کنترلرها سر بزن.
جمع بندی سریع
- ng-bind و {{ }} برای نمایش اند.
- ng-model اتصال دوطرفه می دهد.
- تغییرات فوری و خودکار همگام می شوند.
- کنترلر منطق را از نما جدا می کند.