Home > Developer > Web Develop
In the previous section we learned the interaction between the instruction and the controller by adding an action to the instruction and invoking the method in the controller. In this section we learn how the instructions and instructions between the interaction, we through a small game to learn with everyone, listening to the desert teacher said this is a foreign person to write the demo, we can learn from learning.
1, dynamic Superman
Above the three buttons, on behalf of three Superman, in this want to ask, which want to see Superman's friends are a kind of feeling cheated?
When our mouse moves to the Superman's body, it will enter the superhuman ability (Power + agility + Glow)
<!DOCTYPE HTML><HTMLNg-app= "MyModule"><Head> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "Css/bootstrap.min.css"> <title>The interaction between instructions</title></Head><Body> <Divclass= "Row"> <Divclass= "Col-md-3"> <SupermanStrength>Dynamic Superman---Power</Superman> </Div> <Divclass= "Col-md-3"> <SupermanStrength Speed>Dynamic Superman 2---power + agility</Superman> </Div> <Divclass= "Col-md-3"> <SupermanStrength Speed Light>Dynamic Superman 3---Power + agility + Glow</Superman> </Div> </Div></Body><Scriptsrc= "Js/angular-1.3.0.js"></Script><Scriptsrc= "Js/directive-directive.js"></Script></HTML>
OK, we first created four instructions, one created by the mode of E is called Superman, and the other three is created through a mode (strength, speed and light).
varMyModule = Angular.module (' MyModule '), []); Mymodule.directive (' Superman ',function(){ return{scope:{}, restrict:' AE ', Controller:function($scope) {$scope. Abilities=[]; This. addstrength=function() {$scope. Abilities.push ("Strength"); }; This. Addspeed =function() {$scope. Abilities.push (' Speed '); }; This. Addlight =function() {$scope. Abilities.push (' Light '); }}, Link:function(scope,element,attrs) {Element.addclass (' Btn btn-primary '); Element.bind (' MouseEnter ',function() {console.log (scope.abilities); })}}); Mymodule.directive (' Strength ',function(){ return{require:' ^superman ', Link:function(scope,element,attr,supermanctl) {supermanctl.addstrength (); }}) Mymodule.directive (' Speed ',function(){ return{require:' ^superman ', Link:function(scope,element,attr,supermanctl) {supermanctl.addspeed (); }}) Mymodule.directive (' Light ',function(){ return{require:' ^superman ', Link:function(scope,element,attr,supermanctl) {supermanctl.addlight (); } }})
The above code, the main thing is Superman this command, there are some elements we have not yet known, we introduce the following:
OK, let's introduce the following three instructions, let's just say one, and the others are the same.
There are also additions to these three controllers:
We can see from the code that our three superhuman abilities are proportional to the number of commands we have. They all have a father's instruction, and the parent instruction provides the power of the powers (which we can understand as data). The sub-directive controls whether these functions are appended.
angularjs-the interaction between instructions and instructions (motion Superman)
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
