angular:angularjs:privjazka_dannyx_v_angularjs []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
=====Привязка данных в AngularJS=====
Привязка данных раскрывается через ряд директив:

  * **ng-bind**: осуществляет привязку к свойству innerText html-элемента
  * **ng-bind-html**: осуществляет привязку к свойству innerHTML html-элемента
  * **ng-bind-template**: аналогична ng-bind за тем исключением, что позволяет установить привязку сразу к нескольким выражениям
  * **ng-model**: создает двустороннюю привязку
  * **ng-non-bindable**: определяет участок html-кода, в котором привязка не будет использоваться

Рассмотрим директивы на примере того же контроллера **phonesController**:

<code javascript>
var myApp=angular.module('myApp', []);
myApp.controller('phoneController', function($scope) {
  
  $scope.phones = [{
        name: 'Nokia Lumia 630',
        year: 2014,
        price: 200,
        company: {
            name: 'Nokia',
            country: 'Финляндия'
        }
    },{
        name: 'Samsung Galaxy S 4',
        year: 2014,
        price: 400,
        company: {
            name: 'Samsung',
            country: 'Республика Корея'
        }
    },{
        name: 'Mi 5',
        year: 2015,
        price: 300,
        company: {
            name: 'Xiaomi',
            country: 'Китай'
        }
    }]
});
</code>

====ng-bind====

Директива //ng-bind// используется для создания односторонней привязки одного элемента html к какому-нибудь выражению. И если данное выражение изменится, то вместе с ним обновится и содержимое связанного элемента html. Например, в прошлом разделе мы использовали массив моделей phone. Свяжем элемент с одним из таких объектов:

<code html>
<div ng-controller="phoneController">
    <p>Количество элементов: <span ng-bind="phones.length"></span></p>
    <p>Первый элемент: <span ng-bind="phones[0].name"></span></p>
</div>
</code>

Здесь идет привязка к длине массива phones и к первому его элементу. Если мы добавим в массив новый элемент или изменим название первого элемента, то соответственно изменится и текст в привязанных элементах //span//.
 
====ng-model====

Директива //ng-model// позволяет выполнять двустороннюю привязку как к свойствам объекта, так и к вложенным свойствам:
<code html>
<input type="text" ng-model="property" />
<input type="text" ng-model="object.property" />
<input type="text" ng-model="object.property.property" />
</code>

Директиву //ng-model// можно использовать для привязки к элементам //input, textarea и select//:

<code html>
<div ng-controller="phoneController">
    <input type="text" ng-model="phones[0].name" / >
    <p ng-bind="phones[0].name"></p>
</div>
</code>

При изменении текста в поле ввода синхронно будет изменяться и привязанный к //phones[0].name// элемент p.

====ng-bind-template====
Директива //ng-bind-template// позволяет задать шаблон привязки с использованием выражений. Например:

<code html>
<div ng-controller="phoneController">
<p ng-bind-template="{{phones[0].name}}: {{phones[0].price}} $"></p>
</div>
</code>

====ng-non-bindable====

Но бывает, что нам надо, чтобы AngularJS не обрабатывал какие-то выражения и не использовал привязку. В этом случае мы можем применить директиву //ng-non-bindable//:

<code html>
<p>{{1 + 2}}</p>
<p ng-non-bindable>{{1 + 2}}</p>
</code>

Если в первом случае AngularJS обработает выражение и выведет на страницу его результат, то во втором случае выражение будет выведено как есть.

====ng-bind-html====

Директива //ng-bind-html// позволяет выводить на страницу html-содержимое со всеми тегами. При использовании этой директивы необходимо помнить, результатом вывода может быть потенциально небезопасный код, например, содержащий javascript, поэтому данный аспект надо учитывать.

Чтобы осуществить привязку к коду html, надо подключить дополнительный файл. В архиве библиотеки, который можно найти на официальном сайте, имеется файл //angular-sanitize.js//, а также его минимизированный аналог. Положим этот файл в одну папку с главной библиотекой angularjs и изменим код страницы следующим образом:

<code html>
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="helloController">
<p><textarea ng-model="htmlcode"></textarea></p>
<p ng-bind-html="htmlcode"></p>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', ["ngSanitize"]);
myApp.controller('helloController', function($scope) {
 
    $scope.htmlcode="Директива <b>ng-bind-html</b>";
});
</script>
</body>
</html>
</code>

{{ :angular:angularjs:5.png?600 |}}

Чтобы задествовать модуль //angular-sanitize//, надо при создании модуля установить зависимость от angular-sanitize: //var myApp = angular.module('myApp', ["ngSanitize"]);//. После этого мы сможем изменять код в текстовом поле, в том числе вносить код html, и все изменения автоматически будут применяться к веб-странице.
Инструменты пользователя

Инструменты сайта

Инструменты страницы
