Example of an interactive function between a angularjs instruction and an instruction _angularjs

This article illustrates the interaction between the angularjs instruction and the instruction. Share to everyone for your reference, specific as follows:

In the previous article, an example of the interaction between the ANGULARJS command and the controller, we learned about the interaction between the command and the controller, and then look at how the instructions interact with the instructions.

1. First, to find out what the independent scope

To better understand the scope of independence, let's look at a piece of code:

<div ng-controller= "MyController1" >
     
 

var app=angular.module (' Firstapp ', []);//app module name
  app.controller (' MyController1 ', [' $scope ', function ($scope) {
}]);
App.directive (' Hello ', function () {
    return{
      restrict: ' E ',
      Template: "<div><input type=" Text ' ng-  model= ' username '/>{{username}} ',
      replace:true
    }
}

We defined an instruction and called it two times in HTML, and we found that the result of the call two times was that the scope shared a data using the same instruction, and the result is that we enter data in an input box and change the input box in the second instruction.

How to solve this problem, we need to give instructions to generate a separate scope, each time using the instructions, the generated scope is independent, we only need to modify this:

App.directive (' Hello ', function () {
    return{
      restrict: ' E ',
      scope:{},
      Template: "<div>< Input type= ' text ' ng-model= ' username '/>{{username}} ',
      replace:true
    }
}

The results are as follows:

2. The interaction between instruction and instruction, the inheritance of instruction

(1) First we define a parent directive, defined in the following way:

App.directive (' Father ', function () {
    return{
     restrict: ' E ',
     scope:{},
     controller:function ($ Scope) {
      this.mean1=function () {
       Console.log (' This is the first method ... ');
      This.mean2=function () {
       Console.log (' This is the second method ... ');
      This.mean3=function () {
       Console.log (' This is the third method ... ');}}}
);

We notice that there are also controller in the instructions, where the controller is different from the process of the controller definition, where controller refers to some of the methods defined in the independent scope of the instruction.

(2) defines a child instruction in which the method in scope in the parent directive can be used:

App.directive (' Childfirst ', function () {
    require: ' ^father ',
    link:function (Scope,ele,attr,fatherctrl) {
      fatherctrl.mean1 ();
    }
})

Through this:

Require: ' ^father '

A child instruction can inherit and use some of the methods in the parent directive, independent scope. At this point, our link function can have a fourth parameter.

The difference between methods in link and controller:

The method in link is a method that needs to be executed or executed immediately.

The method in controller is to expose some of the methods that are used externally.

Summarize:

The interaction between instructions is to be used for external instructions through a method exposed in the controller of the instruction.

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.