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


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: 'Китай'
        }
    }]
});

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



    Количество элементов: 
    Первый элемент:

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

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

При изменении текста в поле ввода синхронно будет изменяться и привязанный к //phones[0].name// элемент p. ====ng-bind-template==== Директива //ng-bind-template// позволяет задать шаблон привязки с использованием выражений. Например:

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


{{1 + 2}}
{{1 + 2}}

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

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