Инструменты пользователя
angular:angularjs:directive:ng-include
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:directive:ng-include [2020/05/26 22:34] werwolf |
angular:angularjs:directive:ng-include [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 185: | Строка 185: | ||
| Теперь привязка идет к результату метода setFile: <div ng-include="setFile()">. Для переключения между представлениями определены две радиокнопки: %%<input type="radio" ng-model="data.mode" value="{{button.value}}"%%. С помощью директивы ng-model="data.mode" происходит привязка свойства data.mode к значению радиокнопки, которое берется из button.value. | Теперь привязка идет к результату метода 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 |}} | ||
angular/angularjs/directive/ng-include.1590521643.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
