# AngularJS Essential. Урок 6. Создание пользовательских директив. Домашнее задание.

**URL:** <https://forum.itvdn.com/t/angularjs-essential-urok-6-sozdanie-polzovatelskih-direktiv-domashnee-zadanie/1358>\
**Category:** Frontend Домашние задания\
**Created:** [25.12.2016 11:34:48 UTC](https://forum.itvdn.com/t/angularjs-essential-urok-6-sozdanie-polzovatelskih-direktiv-domashnee-zadanie/1358 "2016-12-25T11:34:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxim.shulga.p](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/m/ea666f/32.png) [@maxim.shulga.p](https://forum.itvdn.com/u/maxim.shulga.p)\
**Post date:** [25.12.2016 11:34:48 UTC](https://forum.itvdn.com/t/angularjs-essential-urok-6-sozdanie-polzovatelskih-direktiv-domashnee-zadanie/1358/1 "2016-12-25T11:34:48Z")

</div>

**Дополнительное задание 1**

> **Код**
>
> ```
> Дополнительное задание 1
> 
> ```
> <script src="../Libraries/angular.js"></script>
> <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
> <link href="../Libraries/bootstrap.css" rel="stylesheet" />
> 
> <script >
> angular.module("app", [])
> .controller("appCtrl", function ($scope) {
> $scope.arrObj = [
> { head1: "First name", head2: "Last name" },
> { firstName: "Ivan", lastName: "Ivanov" },
> { firstName: "Petr", lastName: "Petrov" },
> { firstName: "Sidorov", lastName: "Kirill" }
> ]
> })
> 
> .directive("showTable", function () {
> return function (scope, element, attributes) {
> 
> var data = scope[attributes['showTable']];
> 
> if (angular.isArray(data)) {
> 
> var tbl = angular.element("<table>");
> var tr, thead, tbody;
> 
> tbl.addClass("table table-bordered table-striped table-hover");
> 
> thead = angular.element("<thead>")
> tr = angular.element("<tr>")
> 
> for (property in data[0]) tr.append(angular.element("<th>").text(data[0][property]));
> 
> thead.append(tr);
> tbl.append(thead);
> 
> tbody = angular.element("<tbody>")
> 
> for (var i = 1; i < data.length; i ) {
> tr = angular.element("<tr>")
> for (property in data[i]) tr.append(angular.element("<td>").text(data[i][property]));
> tbody.append(tr);
> }
> 
> tbl.append(tbody);
> element.append(tbl);
> }
> }
> })
> </script>
> 
> ```
> ```

---

<div class="post-metadata">

**Author:** ![maxim.shulga.p](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/m/ea666f/32.png) [@maxim.shulga.p](https://forum.itvdn.com/u/maxim.shulga.p)\
**Post date:** [25.12.2016 11:38:34 UTC](https://forum.itvdn.com/t/angularjs-essential-urok-6-sozdanie-polzovatelskih-direktiv-domashnee-zadanie/1358/2 "2016-12-25T11:38:34Z")

</div>

**Задание 1**

> **Код**
>
> ```
> Задание 1
> 
> ```
> <script src="../Libraries/angular.js"></script>
> 
> <script>
> angular.module("app",[])
> .controller("appCtrl", function ($scope) {
> $scope.paragraphs = ["Paragraph 1", "Paragraph 2", "Paragraph 3", "Paragraph 4"];
> })
> .directive("paragraph", function () {
> return {
> link: function (scope, element, attributes) {
> scope.data = scope[attributes["paragraph"]];
> },
> restrict: "A",
> scope: true,
> replace: true,
> template: "<p ng-repeat = 'item in data' >{{item}}</p>"
> }
> })
> </script>
> 
> ```
> ```

---

<div class="post-metadata">

**Author:** ![maxim.shulga.p](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/m/ea666f/32.png) [@maxim.shulga.p](https://forum.itvdn.com/u/maxim.shulga.p)\
**Post date:** [25.12.2016 11:40:06 UTC](https://forum.itvdn.com/t/angularjs-essential-urok-6-sozdanie-polzovatelskih-direktiv-domashnee-zadanie/1358/3 "2016-12-25T11:40:06Z")

</div>

**Задание 2**

> **Код**
>
> ```
> Задание 2
> 
> ```
> <script src="../Libraries/jquery-2.1.1.min.js"></script>
> <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
> <link href="../Libraries/bootstrap.css" rel="stylesheet" />
> <script src="../Libraries/bootstrap.min.js"></script>
> 
> <script src="../Libraries/angular.js"></script>
> 
> <script>
> angular.module("app",[])
> .controller("appCtrl", function ($scope) {
> $scope.menuItems = [
> { caption: "Google", url: "https://www.google.com.ua/" },
> { caption: "Yandex", url: "https://www.yandex.ua" },
> { caption: "Bing", url: "https://www.bing.com" }
> 
> ];
> })
> .directive("myMenu", function () {
> return function (scope, element, attributes) {
> 
> var caption = attributes["menuCaption"];
> var url = attributes["menuUrl"];
> var data = scope[attributes["myMenu"]];
> 
> if (angular.isArray(data)) {
> 
> element.addClass("btn-group");
> 
> var item = angular.element("<button>");
> 
> item.attr("type", "button")
> .attr("data-toggle", "dropdown")
> .attr("aria-haspopup", "true")
> .attr("aria-expanded", "false")
> .addClass("btn btn-default dropdown-toggle")
> .text("Menu ")
> .append(angular.element("<span>").addClass("caret"));
> 
> element.append(item);
> 
> var ul = angular.element("<ul>").addClass("dropdown-menu");
> var li, a;
> 
> for (var i = 0; i < data.length; i ) {
> 
> li = angular.element("<li>");
> a = angular.element("<a>");
> 
> a.attr("href", data[i][url])
> .text(data[i][caption]);
> 
> li.append(a);
> ul.append(li);
> }
> 
> element.append(ul);
> }
> }
> })
> </script>
> 
> ```
> ```