Angularjs (use of isolate scope in angularjs) and angularjsisolate

Angularjs (use of isolate scope in angularjs) and angularjsisolate

The directive in angular js has a particularly useful thing, that is, isolate scope (isolated scope)

For details about the differences between him and the global scope, refer to the following blog:

AngularJS global scope communicates with Isolate scope

This article mainly describes several usage methods:

1. = usage

[Html] <div class = "card" ng-repeat = "app in apps"> <app-info = "app"> </app-info> </div> [js] app. directive ('appinfo', function () {return {restrict: 'E', scope: {info: '=' // if it is =, the value of the info attribute is assigned to the current scope.info}, templateUrl: 'js/ctictives/appInfo.html '};});

2. = use of attribute names

[html]     <div ng-controller="AppCtrl as appctrl">           Ctrl           <input type="text" ng-model="appctrl.ctrlFlavor">           Dir           <div ab="25" drink="123456" flavor="appctrl.ctrlFlavor"></div>        </div>        [js]var app = angular.module("drinkApp", []);app.controller("AppCtrl", function() {var appctrl = this; appctrl.ctrlFlavor = "blackberry";});app.directive("drink", function() {return {scope: {flavor: "=ab"},template: '<input type="text" ng-model="flavor">'};});

Display result:

3. comprehensive 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:

// Display @ = and & integrated var app = 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 :"@", // @ indicates that the attribute value is assigned to name. Only image: "@", movetype: "=", // indicates that the type is equal to the current attribute value useMove: "&" // & indicates the reference of the corresponding function and the alias of the function corresponding to this attribute.}, controller: "AppCtrl ", // The select option is loaded only when it is declared here. replace: true, templateUrl: "shield_isolate.html "};})

Template:

<Script type = "text/ng-template" id = "shield_isolate.html"> <div class = "panel-default"> <div class = "panel-body"> <div> <figure>  <figcaption >{{ name }}</figcaption> </figure> </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> <d Iv class = "panel-footer clearfix"> <div class = "btn-primary" ng-click = "useMove ({name: name, movetype: movetype, move: value}) "> Action! </Div> // ":" The first three parameters correspond to the names of the three parameters of the parent function //": "the following three parameters correspond to the three attributes of the specified scope so that values can be uploaded one by one. </div> </script>

Display result:

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.