Home > Developer > Web Develop
Instructions
1. Directives are essentially the way Angularjs expands HTML elements with custom functionality.
Create directives using custom elements, such as:<my-directive></my-directive>
. directive (' mydirective ', function () {
return{
Restrict: ' E ',
Replace:true,//This sentence can not be added
Template: ' <a href= ' http://baidu.com >clickMe</a> '
};
});
Results: ClickMe Click to jump to Baidu page
Where restrict tells Angularjs which declaration format to use to match the instruction definition when compiling HTML, you can specify one or more formats at the same time, with elements (E), Attributes (A), Class (C), and Comments (M), mostly using a, because of good cross-browser compatibility
Instead of nesting inside, the Replace method replaces the directive declaration with a custom element.
2. Built-in directives
(1) Boolean property
When this property appears, the property value is true and does not appear to be false. When using dynamic Data binding in Angularjs, it is not easy to set the property value to True or false to determine whether the corresponding property is inserted or removed on the target element by the value of the op-expression
A.ng-disabled
Using ng-disabled, you can bind the Disabled property to the following form input fields:
<input> (text,checkbox,radio,number,url,email,submit) <textarea> <select> <button>
such as: <input type= "Text" ng-model= "Property" >
<button ng-disabled= "!property" >aButton</button>
The button is disabled until the user enters content in the text field.
B.ng-readonly
<input type= "text" ng-model= "MyProperty" >
<input type= "text" ng-readonly= "MyProperty" value= "some text here"/>
$scope. myproperty= "";
When a value is entered in input, the second input value is read-only
C.ng-checked
<label>someproperty={{someProperty}}</label>
<input type= "checkbox" ng-checked= "Someproperty" ng-init= "Someproperty=true" ng-model= "Someproperty"/>
Ng-init initializes the Someproperty to true, that is, ng-checked is true,someproperty=true, that is, the checkbox is selected
d.ng-selected
Binding on whether the selected property of the option tag appears
<label>select fish:</label>
<input type= "checkbox" ng-model= "Istwofish" ><br/>
<select>
<option>one fish</option>
<option ng-selected= "Istwofish" >two fish</option>
</select>
When you click on the checkbox, it will automatically pick up Fish
(2) Class Boolean property
A.ng-href
Apply ng-href instead of href when creating URLs dynamically using properties in the current scope
One potential problem is that when a user clicks on a link that is dynamically generated by interpolation, if the interpolation does not take effect, it jumps to the wrong page
B.ng-src
The browser does not load the image until the ng-src corresponding expression takes effect
<body ng-app= "MyApp" >
</body>
Angular.module ("MyApp", [])
. Run (function ($rootScope, $timeout) {
$timeout (function () {
$rootScope. imgsrc= ' 360 feedback 17060225202456.png ';
},2000);
});
3. Using sub-scopes in directives
Ng-app and Ng-controller are special directives because they modify the scope of instructions nested inside them
(1) Ng-app
Any DOM element with the Ng-app attribute will be marked as the starting point of the $rootscope
The $rootscope is the starting point of the scope chain, and any instruction nested within Ng-app inherits it, and can be accessed through the Run method $rootscope
(2) Ng-controller
Create a sub-scope for the directives nested within it to avoid defining all operations and models on $rootscope
The responsibility of the $scope object is to host the operations and models that are shared by the directives in the DOM, which are JavaScript objects saved on $scope that contain transient state data, and persisted state data should be persisted to the service.
<body ng-app= "MyApp" >
<div ng-controller= "Somecontroller" >
{{Somebarevalue}}
<button ng-click= "someaction ()" >
Communicate to Child
</button>
<div ng-controller= "Childcontroller" >
{{Somebarevalue}}
<button ng-click= "childaction ()" >
Communicate to Parent
</button>
</div>
</div>
</body>
Angular.module ("MyApp", [])
. Controller ("Somecontroller", function ($scope) {
$scope. somebarevalue= "Hello computer";
$scope. Someaction=function () {
$scope. somebarevalue= "Hello human,from parent";
};
})
. Controller ("Childcontroller", function ($scope) {
$scope. Childaction=function () {
$scope. somebarevalue= "Hello human,form child";
};
});
Hello computer
Communicate to child//actual effect is button
Hello computer
Communicate to Parent//actual effect is button
Click on the parent button, two values are Hello Human,from parent, and then click on the Child button, the child button's block shows Hello Human,form children, resulting in two times the value is different.
The following methods are used to maintain data consistency in real-world development:
<body ng-app= "MyApp" >
<div ng-controller= "Somecontroller" >
{{Somemodel.somevalue}}
<button ng-click= "someaction ()" >
Communicate to Child
</button>
<div ng-controller= "Childcontroller" >
{{Somemodel.somevalue}}
<button ng-click= "childaction ()" >
Communicate to Parent
</button>
</div>
</div>
</body>
Angular.module ("MyApp", [])
. Controller ("Somecontroller", function ($scope) {
$scope. somemodel={
Somevalue: ' Hello computer '
}
$scope. Someaction=function () {
$scope. somemodel.somevalue= "Hello human,from parent";
};
})
. Controller ("Childcontroller", function ($scope) {
$scope. Childaction=function () {
$scope. somemodel.somevalue= "Hello human,form child";
};
});
Click Communicate to child, the result is Hello Human,from parent, click Communicate to parent, the result is Hello Human,from parent
Cause: In a JS object, strings, numbers, and Boolean variables are value-copied, and arrays, objects, and functions make references copy. Because of the relationship of the stereotype inheritance, modifying the Somebarevalue in the parent object also modifies the values in the child object, but vice versa. If you set a property of a model object to a string, you can share it by reference, and modifying the property in the child $scope also modifies the property in the parent $scope.
(3) Ng-include
You can load, compile, and include external HTML fragments into your current app, and a child scope is created automatically, and you can add a Ng-controller directive on the same DOM element.
<div ng-include= "/mytemp.html" ng-controller= "Myctrl" ng-init= "Name= ' World '" >
Hello {{Name}}
</div>
(4) Ng-switch
This directive is to be used in conjunction with Ng-switch-when and on= "PropertyName"
<div ng-controller= "Myctrl" >
<select ng-model= "Selection" ng-options= "item for item in items" >
</select>
<div ng-switch on= "Selection" >
<div ng-switch-when= "Settings" >settings div</div>
<div ng-switch-when= "Home" >home div</div>
<div ng-switch-default= "Other" >default</div>
</div>
</div>
Angular.module (' MyApp ', [])
. Controller (' Myctrl ', function ($scope) {
$scope. items=[' Settings ', ' home ', ' other '];
$scope. selection= $scope. Items[0];
});
(5) Ng-view
Used to set the location of the view that will be managed and placed in HTML by the route
(6) Ng-if
You can create or remove an element in the DOM based on the value of an expression. When the expression of ng-if is false, the DOM element is removed and the expression is true again when the element and its inner child elements are re-loaded into the DOM, and the state is their original state, not the state of the last time it was removed.
(7) Ng-repeat
Used to traverse a collection or generate a template instance for each element in the collection, mainly with the following usage:
$index the progress of the Traverse $first True when the element is the first value to traverse
$last $middle $even (index is even) $odd (index is odd)
<body ng-app= "MyApp" ng-controller= "Ctrl01" >
<div style= "Padding:10px;font-weight:bold;" > Address Management </div>
<ul>
<li ng-repeat= "A in List" >
</li>
</ul>
</body>
Angular.module ("MyApp", [])
. Controller (' Ctrl01 ', function ($scope) {
$scope. list=[
{id:1,address: # 1th Lotus Road '},
{id:2,address: ' Jianshe road 3rd '},
{id:3,address: ' No. 7th ' Xinghua Road '},
{id:4,address: ' Beijing Bird's Nest '}
];
})
(8) {{}}
Is the ANGULARJS built-in template syntax, which is actually an instruction, is a shorthand form of ng-bind. Using {{}} in the area visible on the screen causes the elements that are not rendered to flicker when the page loads, using Ng-bind to avoid this problem
(9) Ng-bind
<body ng-init= "greeting= ' HelloWorld '" >
<p ng-bind= "Greeting" ></p>
</body>
(Ten) Ng-cloak
You can also avoid flashing elements that are not rendered, and hide the inner elements until the corresponding page is called by the route.
<body ng-init= "greeting= ' HelloWorld '" >
<p ng-cloak>{{greeting}}</p>
</body>
(one) ng-bind-template
You can bind multiple expressions in a view
<div ng-bind-template= "{{message}}{{name}}" ></div>
(Ng-model)
(ng-show/ng-hide)
(Ng-change)
<body ng-app= "MyApp" >
<div ng-controller= "Equationcontroller" >
<input type= "text" ng-model= "equation.x" ng-change= "Change ()"/>
<code>{{equation.output}}</code>
</div>
</body>
Angular.module ("MyApp", [])
. Controller ("Equationcontroller", function ($scope) {
$scope. equation={};
$scope. Change=function () {
$scope. Equation.output=parseint ($scope. equation.x) +2;
};
})
(Ng-form)
Used to nest another form inside a form, which means that external forms are legitimate when all the child forms inside are valid.
You cannot enter an element dynamically by using character interpolation to generate the Name property, and all the input fields that need to be duplicated within the Ng-form directive are included within an external form element. You can use Ng-repeat to dynamically create forms
The CSS class is automatically set based on the validation state of the form:
Valid when set: Ng-valid is not valid when set: Ng-invalid
Set when not modified: Ng-prition when modified: Ng-dirty
Use one of the following two instructions when specifying a form submission:
Ng-submit Ng-click
Using Ng-loop to traverse all the data retrieved from the server, a new form is generated for each field during the loop, because the Name property cannot be generated dynamically, and this property is required for validation.
Cases:
<meta charset= "Utf-8"/>
<title></title>
<style>
input.ng-invalid{
border:1px solid red;
}
input.ng-valid{
border:1px solid Green;
}
</style>
<body>
<form name= "form" ng-controller= "Formcontroller" ng-submit= "SubmitForm ()" Novalidate>
<div ng-repeat= "field in Fields" ng-form= "Form_input" >
<input type= "text" name= "Dynamic_input" ng-required= "field.isrequired" ng-model= "Field.name"
Placeholder= "{{field.placeholder}}"/>
<div ng-show= "form_input.dynamic_input. $dirty && form_input.dynamic_input. $invalid" >
<span class= "error" ng-show= "Form_input.dynamic_input. $error. Required" >the field is required.</span>
</div>
</div>
<button type= "Submit" ng-disabled= "form. $invalid" >submit all</button>
</form>
</body>
Angular.module ("MyApp", [])
. Controller ("Formcontroller", function ($scope) {
$scope. fields=[
{placeholder: ' Username ', isrequired:true},
{placeholder: ' Password ', isrequired:true},
{placeholder: ' Email (optional) ', Isrequired:false},
];
$scope. Submitform=function () {
Alert ("It works!");
};
});
(Ng-click)
<body>
<div ng-controller= "Counterctrl" >
<button ng-click= "count=count+1" ng-init= "count=0" >
Increment
</button>
Count:{{count}}
<button ng-click= "decrement ()" >Decrement</button>
</div>
</body>
Angular.module (' MyApp ', [])
. Controller ("Counterctrl", function ($scope) {
$scope. Decrement=function () {
$scope. count= $scope. count-1;
};
})
Two button, click Increment plus 1, click Decrement minus 1
(+) Ng-select
The data is bound to the <select> elements of HTML and can be used with Ng-model and ng-options directives.
The value of ng-options can be a connotation expression, which means that an array or an object can be accepted and looped, providing internal content to options inside the Select tag
<body>
<div ng-controller= "Citycontroller" >
<select ng-model= "City" ng-options= "City.name for City in cities" >
</select>
Best city: {{city.name}}
</div>
</body>
Angular.module (' MyApp ', [])
. Controller (' Citycontroller ', function ($scope) {
$scope. Cities = [
{name: ' Seattle '},
{name: ' San Francisco '},
{name: ' Chicago '},
{name: ' New York '},
{name: ' Boston '}
];
});
(Ng-submit)
(Ng-class)
Dynamically set the class of an element by binding an expression that represents all the classes that need to be added, and the repeating class is not added. When an expression changes, the previously added class is removed and the new class is added
<style>
. red{
background-color:red;
}
</style>
<body>
<div ng-controller= "Lotterycontroller" >
<div ng-class= "{red:x>5}" ng-if= "X>5" >you won!</div>
<button ng-click= "X=generatenumber ()" ng-init= "x=0" >
Drew number!
</button>
<p>number is:{{x}}</p>
</div>
</body>
Angular.module (' MyApp ', [])
. Controller (' Lotterycontroller ', function ($scope) {
$scope. Generatenumber=function () {
Return Math.floor ((Math.random () *10) +1);
};
});
AngularJS directive I
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
