Ключевые моменты для обучения
• Зачем использовать команды
• Создать пользовательские директивы
• Работать с JQLite
1. Зачем использовать пользовательские команды
NG имеет много встроенных пользовательских директив, но они иногда не соответствуют вашим требованиям, что требует от нас создания пользовательских свойств.
2. Пользовательские команды
Далее давайте сделаем небольшой корпус. Когда мышь нажимает, чтобы повысить цену, элементы списка автоматически увеличатся. Конечно, список также автоматически добавляется с помощью инструкций. Это пустой див
<! Doctype> <!-Использовать модуль-> <html ng-app = "exampleapp"> <head> <tite> angluar test </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootptrap.min.css"> href = "css/bounds.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv ng-controller = "defaultctrl"> <div> <h3> products </h3> </div> <div> <! Увеличьте </button> </div> <div> <!-отображать данные о продуктах в неопределенном списке-> <!-list property = "цена | валюта" Список единиц элементов локализованы-> <div unorderlist = "продукты" Property = "цена | валюта"> </div> </div> </div> </dlv> <script type = "javascript src="js/angular.min.js"></script><script type="text/javascript">angular.module("exampleApp", []) .directive("unorderlist", function () { // scope scope// element Apply the element of the directive // attrs Use the attributes of the element of the directive return function (scope, element, attrs) { // ATTRS ['UnomortingList'] Получите значение атрибута Unomordlist, здесь есть продукты // element.append (ul); <li> Элемент tag li = angular.element ("<li>"); Scope. $ Watch (Watcherfn, Function (NewValue, OldValue) {// Обновление значения li li.text (newvalue);})}) (i); «Fruit», цена: 1.20, истечение: 10}, {name: «бананы», категория: «фрукты», цена: 2.42, истечение срока действия: 7}, {name: «груши», категория: «плод», цена: 2.02, истечение: 6}]; $ scope.products.length;Анализ:
Шаг 1: Создайте контроллер, добавьте продукты модели данных и метод IncrementPrices ()
Шаг 2: Настройте тег UnomorderList. Функция этого тега: отобразить его значение в неупорядоченном списке через модель данных с общего числа.
Часть 3: и когда кнопка разметки нажата, значения неупорядоченного списка будут увеличиваться в последовательности
3. Работа с JQLite
NG имеет встроенный JQLite, который является меньшей версией jQuery
<! Doctype> <!-Использовать модуль-> <html ng-app = "exampleapp"> <head> <tite> angluar test </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootptrap.min.css"> href = "css/bounds.min.css" type = "text/css" href = "css/bootstrap-teme.min.css"> </head> <body> <dlv> <!-Используйте пользовательскую директивность-> <ol ometicic-directive> <li> Яблоки </li> <ul> <li> бананы </li> <li> </li> <li> <ul> <li> <li> апельсины </li> </ol> </dlv> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module ("examplepp", []). // Найти все LIS под элементом элемента, здесь элемент-это Caller <ol> var elects = element.find ("li"); (item.eq (i) .Text () == "Oranges") {item.eq (i) .css ("color", "Red"); items.css ("color"));Анализ:
Шаг 1: Настройте контроллер и определите имена моделей данных
Шаг 2: Настройте команду, функция состоит в том, чтобы выяснить все LI в элементах, используемых командой, и назначить разные значения различным цветам шрифта.
Шаг 3: Позвоните и используйте инструкции в представлении
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.