angular:angularjs:privjazka_dannyx_v_angularjs []

Содержание

Привязка данных в AngularJS

Привязка данных в 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. Свяжем элемент с одним из таких объектов:

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

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

ng-model

Директива ng-model позволяет выполнять двустороннюю привязку как к свойствам объекта, так и к вложенным свойствам:

<input type="text" ng-model="property" />
<input type="text" ng-model="object.property" />
<input type="text" ng-model="object.property.property" />

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

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

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

ng-bind-template

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

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

ng-non-bindable

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

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

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

ng-bind-html

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

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

<!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>

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

Инструменты пользователя

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

Боковая панель