Angular JS in the directive directive has a particularly useful thing, that is isolate scope (isolated scope)
What's the difference between a specific and a global scope, you can refer to this blog post:
AngularJS global scope and isolate scope communication
This article mainly explains its specific use methods:
1. Use of =
[HTML] <div class= "card" ng-repeat= "app in Apps" > <app-info info= "app" ></app-info> </ Div> [JS] app.directive (' AppInfo ', function () { return {restrict: ' E ', scope: { info: ' = '//If yes = Is the value of the Info property assigned to the current Scope.info}, Templateurl: ' js/directives/appinfo.html ' }; });
2. = Use of property names
[HTML] <div ng-controller= "Appctrl as Appctrl" > Ctrl <input type= "text" ng-model= "Appctrl.ctrlflavor" > Dir <div ab= "drink=" 123456 "flavor=" Appctrl.ctrlflavor "></div> </div> [JS] var app = Angular.module ("Drinkapp", []), App.controller ("Appctrl", function () {var Appctrl = this; appctrl.ctrlflavor = "b Lackberry ";}); App.directive ("Drink", function () {return {scope: {flavor: "=ab"},template: ' <input type= "text" ng-model= "Flavor" > '};});
Show Results:
3. Combined use of @ = and &
HTML code:
<div class= "Maincontroller" ng-app= "Isolateapp" > <div ng-controller= "Appctrl" > <div class= " Row "> <character name=" Roman regins "image=" img/p1.jpg "movetype=" Movetype "use-move=" Getmove (name, Movetype,move) "class=" col-xs-4 "></character> <character name=" Seth Rollins "image="./img/p2.jpg " Movetype= "Movetype" use-move= "Getmove (name,movetype,move)" class= "col-xs-4" ></character> <character name= "Dean Ambrose" image= "./img/p3.jpg" movetype= "Movetype" use-move= "Getmove (name,movetype,move)" class= " Col-xs-4 "></character> </div> </div> </div>
JS Control:
var app showing @ = and & Integrated = Angular.module (' Isolateapp ', []); App.controller ("Appctrl", [' $scope ', "$element", Function ($scope, $element) { $scope. getmove = function (name, Movetype,move) { console.log (name+ ' $$$ ' +movetype+ ' $$$ ' +move); } $scope. movetypes = [' Amove ', ' Bavi ', ' cmp4 ']; $scope. Movetype = $scope. Movetypes[0]; }]) . directive ("character", function () { return { restrict: "E", scope:{ name: "@", //@ The value of the attribute is assigned to name. Image: "@", movetype: "=",//Represents a value of type equal to the current property usemove: "&"//& represents a reference to the corresponding function and the property corresponding to the function alias is him }, controller: "Appctrl",//only this declaration will be loaded in the Select option replace:true, templateurl : "Shield_isolate.html" }; })
Template:
<script type= "Text/ng-template" id= "shield_isolate.html" > <div class= "Panel Panel-default" ><div class= "Panel-body" ><div><figure> <figcaption>{{name}} </figcaption></figure></div></div><div>move: <input type= "text" ng-model= " Value "class=" Form-controller "/></div><div> Select Move Type: <select ng-model=" Movetype " ng-options=" Movetype for Movetype in Movetypes "> </select></div><div class=" Panel-footer clearfix "><div class=" btn btn-primary " ng-click=" Usemove ({name:name,movetype:movetype,move : value}) ">action!</div>//here": "Three parameters corresponding to the parent function's three parameter name//": "After the three parameters corresponding to the given value of the scope of the three attributes to one by one corresponding to the value of </div> </div></script>
Show Results:
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Angularjs Study VIII (use of isolate scope in Angularjs)