Home > Developer > Web Develop
Some time ago we learned the angular instruction, he created the element through the ECMA way, can let us share these elements, we also know that we can add some action events to this instruction through the link method, this section, we will write and let angular's instruction and the controller to interact.
1, instruction and controller interaction<!DOCTYPE HTML><HTMLNg-app= "Mycontroller"><Head> <MetaCharSet= "Utf-8"> <title>Instruction Multiplexing</title></Head><Body> <DivNg-controller= "Myctrl"> <Loader>Sliding load</Loader> </Div></Body><Scriptsrc= "Js/angular-1.3.0.js"></Script><Scriptsrc= "Js/directive-controller.js"></Script></HTML>
The above code is not trivial, there is a controller has an instruction (loader), the following can be seen we created this command through directive, and we pass the link to assign him the mouse event (MouseEnter).
varMyModule = Angular.module (' Mycontroller '), []); Mymodule.controller (' Myctrl ',function($scope) {$scope. LoadData=function() {Console.log ("Load Data ..."); }}) Mymodule.directive (' Loader ',function(){ return{restrict:' AE ', Link:function(scope,element,attr) {Element.bind (' MouseEnter ',function() {scope.loaddata (); }) } }})
Let's take a look at the results of the run, OK, we print out "load data ...".
2, how can multiple controllers share an instruction?The purpose of our creation is to reuse it, which is, of course, the ultimate idea of MVC.
Some changes have taken place in our code.
<!DOCTYPE HTML><HTMLNg-app= "Mycontroller"><Head> <MetaCharSet= "Utf-8"> <title>Instruction Multiplexing</title></Head><Body> <DivNg-controller= "Myctrl"> <LoaderLoaddatafn= "LoadData ()">Sliding load</Loader> </Div> <DivNg-controller= "MYCTR2"> <LoaderLoaddatafn= "LoadData2 ()">Sliding load 2</Loader> </Div></Body><Scriptsrc= "Js/angular-1.3.0.js"></Script><Scriptsrc= "Js/directive-controller.js"></Script></HTML>
First, we created two controllers MYCTR1 and MYCTR2, at the same time, we give loader this instruction, add a custom property called Loaddatafn, give him the value is the following JS in the two corresponding Controller method LoadData () and LOADDATA2 ()；
varMyModule = Angular.module (' Mycontroller '), []); Mymodule.controller (' Myctrl ',function($scope) {$scope. LoadData=function() {Console.log ("Load Data ..."); }}) Mymodule.controller (' MyCtr2 ',function($scope) {$scope. LoadData2=function() {Console.log ("Load Data 2 ..."); }}) Mymodule.directive (' Loader ',function(){ return{restrict:' AE ', Link:function(scope,element,attr) {Element.bind (' MouseEnter ',function(){ //Scope.loaddata (); //scope. $apply ("LoadData ()");scope. $apply (ATTR.LOADDATAFN); }) } }})
Of course, we also made a change in the link method of the directive, which provides me with four parameters: scope, Element, attr, and parent controller. We have also given the element binding event through the Element.bind () in the parameters, we can also get the properties on the instruction through the Attr property, and then the $apply method to complete the call. this is to be presented here, we have to get the attributes on the instruction element, it is important to note that we have to write the property name in lowercase, this is the Angularjs pit.
angularjs-Instruction and Controller interaction
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
