angularjs-Instruction and Controller interaction

Source: Internet
Author: User

Preface:

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.