Key points for learning
•Why use commands
•Create custom directives
• Work with jqLite
1. Why use custom commands
NG has many custom directives built in, but they sometimes do not meet your requirements, which requires us to create custom properties.
2. Custom commands
Next, let's do a small case. When the mouse clicks to increase the price, the list items will automatically increase. Of course, the list is also automatically added through instructions. It is an empty div
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body> <dlv ng-controller="defaultCtrl"> <div> <h3>Products</h3> </div> <div> <!-- Click to increase the price and the price increases --> <button type="button" ng-click="incrementPrices()">Critical increase</button> </div> <div> <!-- Display products data in an unordered list--> <!-- list-property="price | currency" List item units localized--> <div unorderlist="products" list-property="price | currency"></div> </div> </div> </dlv><script type="text/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['unorderlist'] Get the value of the unorderlist attribute, here is products // Get the value of the data model, here is scope.products var data = scope[attrs['unorderlist']]; // Create a <ul> tag element var ul = angular.element("<ul>"); // Create a <ul> tag element var ul = angular.element("<ul>"); // Add <ul> element.append(ul); // Get the listProperty attribute value, here is price | currency var expression = attrs['listProperty']; // Determine whether it is an array if (angular.isArray(data)) { // traverse the data model scope.products for (var i = 0; i < data.length; i++) { // Add closure and pass i in (function (index) { // Create a <li> tag element var li = angular.element("<li>"); // Add <li> tag to <ul> ul.append(li); // Listener function, use $eval to calculate the value of expression and data[index] var watcherFn = function (watchScope) { return watchScope.$eval(expression, data[index]); } // Add $watch listener to the changes in scope scope.$watch(watcherFn, function (newValue, oldValue) { // Update the value of li li.text(newValue); }) })(i); } } } } } } } }) .controller("defaultCtrl", function ($scope) { // Data model $scope.products = [ { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 }, { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 }, { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 } ]; // Increment price $scope.incrementPrices = function () { for (var i = 0; i < $scope.products.length; i++) { $scope.products[i].price++; } } })</script></body></html>Analysis:
Step 1: Create a controller, add data model products and incrementPrices() method
Step 2: Customize the unorderlist tag. The function of this tag is: display its value in an unordered list through the scoped data model.
Part 3: And when the markup button is clicked, the values of the unordered list will increase in sequence
3. Work with jqLite
NG has built-in jqLite, which is a smaller version of JQuery
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body> <dlv> <!-- Use custom directive--> <ol domestic-directive> <li>Apples</li> <ul> <li>Bananas</li> <li>Cherries</li> <li>Oranges</li> </ul> <li>Pears</li> <li>Oranges</li> </ol> </dlv><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">angular.module("exampleApp", []) .directive("domeDirective", function () { return function (scope, element, attrs) { // Find all the lis under the element element, here the element is the caller <ol> var items = element.find("li"); // To all li lis, the font-weight is bold items.css("font-weight", "bold"); // To traverse li, the font color with Oranges is red, the rest is green for (var i = 0; i < items.length; i++) { if (items.eq(i).text() == "Oranges"){ items.eq(i).css("color", "red"); } else { items.eq(i).css("color", "green"); } } // Print out the length and font color of li console.log("Items length : " + items.length); console.log("Color: " + items.css("color")); } })</script></body></html>Analysis:
Step 1: Customize the controller and define the data model names
Step 2: Customize the command, the function is to find out all the lis under the elements used by the command, and assign different values to different colors of the font.
Step 3: Call and use instructions in the view
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.