angular:angularjs:directive
https://dokuwiki.webmastermsk.ru/
2026-08-12T14:06:22+0000
https://dokuwiki.webmastermsk.ru/
https://dokuwiki.webmastermsk.ru/lib/tpl/dokuwiki/images/favicon.icotext/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:custom_directive
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:custom_directive&rev=1673515088&do=diff
Пользовательская директиваtext/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-class_i_ng-style
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-class_i_ng-style&rev=1673515088&do=diff
ng-class и ng-style
Данные директивы служат стилизации элементов. Объявим в контроллере два объекта:
<!DOCTYPE html>
<html ng-app="studyModule">
<head>
<title>ng-class and ng-style</title>
<script src="../angular.min%20.js"></script>
<link href="../bootstrap-theme.css" rel="stylesheet" />
<link href="../bootstrap.css" rel="stylesheet" />
<script>
angular.module("studyModule", [])
.controller("studyCtrl", function ($scope) {
$scope.tasks = [
…text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-cloak
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-cloak&rev=1673515088&do=diff
Директива ng-cloak
Все, кто использует AngularJS при разработке сайтов сталкивался с проблемой, когда вначале загружается страница с разметкой, а потом, когда подгружается сам Angular все приходит в норму, и страница приобретает нормальный вид. Но до этого момента, в зависимости от скорости компьютера, скорости интернета, и сложности самой страницы пользователь вынужден наблюдать страницу с разметкой и брекетами ангуларя. Это производит не лучшее впечатление на пользователя -и уж точно не созда…text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-focus
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-focus&rev=1673515088&do=diff
ng-focus
Пример
Выполнить выражение, когда поле ввода получает фокус:
<input ng-focus="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>
Определение и использованиеtext/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-if
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-if&rev=1673515088&do=diff
ng-if
Действие ng-if во многом похоже на действие ng-show/ng-hide. Если ng-if принимает значение false, то элемент с директивой удаляется из структуры DOM, а при значении true, наоборот, добавляется:text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-include
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-include&rev=1673515088&do=diff
Директивы шаблонов ng-include
Директива ng-include получает с веб-сервера фрагмент кода HTML, обрабатывает его и добавляет на html-страницу. Подобные фрагменты называются частичными представлениями.
Создадим в одной папке рядом с главной страницей index.html новый файл phonesList.html со следующим содержимым:…text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-model-options
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-model-options&rev=1673515088&do=diff
ng-model-options
Example
Подождите с привязкой данных, пока поле не потеряет фокус:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name" ng-model-options="{updateOn: 'blur'}">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-repeat-start_and_ng-repeat-end
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-repeat-start_and_ng-repeat-end&rev=1673515088&do=diff
ng-repeat-start и ng-repeat-end
AngularJS упрощает реализацию общих задач привязки данных. Мы устанавливаем модель представления для нашего приложения, используя $scope в контроллере, и обращаемся к ней в view .AngularJS автоматически обновляет представление при изменении значения $scope.text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-repeat
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-repeat&rev=1673515088&do=diff
Директива ng-repeat
Директива ng-repeat позволяет производить обход массивов в стиле цикла for-each и генерировать для них элементы html. Например, при рассмотрении контроллеров мы создали контроллерtext/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-show_i_ng-hide
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-show_i_ng-hide&rev=1673515088&do=diff
ng-show и ng-hide
Директивы ngshow и nghide служат для отображения и скрытия элемента соответственно. Например, создадим в контроллере еще один объект для хранения булевых значений:text/html2023-01-12T09:18:08+0000Anonymous (anonymous@undisclosed.example.com)angular:angularjs:directive:ng-switch
https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angularjs:directive:ng-switch&rev=1673515088&do=diff
Директива ng-switch
Директива ng-include позволяет подгружать нужные файлы, однако иногда рациональнее будет определить фрагменты кода html сразу же на главной странице и отображать их в зависимости от условий. Для этого предназначена директива