Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:directive:ng-include [2020/05/26 22:31]
werwolf
+++ angular:angularjs:directive:ng-include [2023/01/12 12:18] (текущий)
@@ Строка 81: / Строка 81: @@
 {{:angular:angularjs:directive:include.png?200|}}
-Поскольку для загрузки представления, в частности, файла phonesList.html AngularJS использует Ajax, то мы не сможем напрямую кинуть файл веб-страицы в веб-браузер. Нам надо обращаться к нему через веб-сервер:
+Поскольку для загрузки представления, в частности, файла phonesList.html AngularJS использует Ajax, то мы не сможем напрямую кинуть файл веб-страицы в веб-браузер. Нам надо обращаться к нему через веб-сервер:\\
-{{:angular:angularjs:directive:17.png?400| }}
+{{ :angular:angularjs:directive:17.png?400 |}}
 ====Динамическая загрузка представлений====
@@ Строка 181: / Строка 181: @@
 </code>
-{{:angular:angularjs:directive:include2.png?600|}}
+{{ :angular:angularjs:directive:include2.png?400 }}
 Теперь привязка идет к результату метода setFile: <div ng-include="setFile()">. Для переключения между представлениями определены две радиокнопки: %%<input type="radio" ng-model="data.mode" value="{{button.value}}"%%. С помощью директивы ng-model="data.mode" происходит привязка свойства data.mode к значению радиокнопки, которое берется из button.value.
+====ng-include как  атрибут====
+<code html>
+<!DOCTYPE html>
+<html ng-app="studyModule">
+<head>
+    <title>ng-include</title>
+    <!--шаблоные директивы используются для того чтобы генерировать html по шаблону, облегчить работу с коллекциями даных и для добавления базовой логики на страницу-->
+    <script src="../../angular.min%20.js"></script>
+    <link href="../../bootstrap-theme.css" rel="stylesheet" />
+    <link href="../../bootstrap.css" rel="stylesheet" />
+    <script>
+        //директива ng-include превосходно подходит для управления partial view
+        //но более часто вам приходится переключатся между небольшими кусками контента который уже содержится в документе и для этого в AngularJS есть директива ng-switch
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) {
+            $scope.tasks = [
+                { action: "Buy flowers", complete: false },
+                { action: "Go to gym", complete: true },
+                { action: "Buy snickers", complete: true },
+                { action: "Buy notebook", complete: false },
+                { action: "Call friends", complete: true },
+                { action: "Go to cinema", complete: false },
+                { action: "Buy Big-Mac", complete: true },
+                { action: "Buy a book", complete: false },
+                { action: "Call mom", complete: true }
+            ];
+            $scope.showFile = function () {
+                return $scope.list ? "../list.html" : "../table.html";
+            };
+            $scope.displayMessage = function () {
+                console.log("Content: " + $scope.showFile());
+            };
+        });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" class="panel" ng-controller="studyCtrl">
+        <h3 class="panel-header">Tasks List</h3>
+        <div class="well">
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox" ng-model="list" />
+                    Switch the view
+                </label>
+            </div>
+        </div>
+        <div ng-include="showFile()" onload="displayMessage()"></div>
+        <!--displayMessage() фунция, которая будет вызваться в момент загрузки дива-->
+        <!--аттрибут ng-include может быть применен к любому html элементу-->
+    </div>
+</body>
+</html>
+</code>
+{{ :angular:angularjs:directive:include3.png?600 |}}

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

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

Различия

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