How to create scope in directives:
The scope default value is False, which indicates that scope is the same as the scope of the parent controller
Scope:true, which means creating a new scope that inherits from the parent scope, so that instructions under the same parent control can communicate using this scope.
Create a completely independent scope that belongs to the directive itself, which prevents the reading and modification of data from the parent scope.
To create a fully independent scope API:
=: Provides a two-way binding property to the parent scope.
The ability to access functions that are registered in the parent scope within an instruction.
@: A property that provides a one-way binding of a parent scope-child instruction.
The key is that there are a few points to understand:
The object on the $scopes is bound to the data model on the HTML instruction tag, that is, the $scope object on the parent controller cannot be passed directly to the link function of the child instruction, and the $scope reference of the quilt instruction.
The flow of data should be:
The $scope object on the parent controller binds the data model of the instruction label on the HTML, which is used as the attribute value of the child instruction and then passed to the scope of the child instruction to bind to it.
Other notes to be noted are:
The attribute name of an instruction tag on HTML cannot have uppercase. If the attribute value of scope on the instruction is uppercase, the attribute name of the instruction tag on the corresponding HTML must have a-symbol.
For example:
The attribute name of the scope on the instruction can be consistent with the attribute name of the instruction tag on the HTML, at which point the attribute value of the scope cannot be written
If you use a one-way data binding @,html the attribute value of the instruction tag to add the curly brace {{}}
If you are using bidirectional data binding =, you do not need to add.
The variable on the parent controller $scope must be the attribute value of the directive under the quarantine scope
When using $scope. $watch within the instruction to listen for changes in the values of objects on the parent controller $scope, you must be aware that:
1, the value must be two-way binding;
2, only in the form of the attribute value on the listening instruction, and not in the form of listening to the variable on the $scope. Use "attrs. Variable name"
Or it won't trigger a listener.
data interaction of Custom directive in Angularjs
First put the official document address: Https://docs.angularjs.org/guide/directive
As for my superficial understanding of directive, it is generally used in the encapsulation of independent DOM elements, where applications for control reuse and logical module separation. The latter I have not contacted for a while, but the data interactive part is the same. So give a few examples of the former to be forgotten later.
The scope $scope of the directive itself can optionally be closed, and the controller share a scope $scope. Examples are as follows:
1 <body ng-app= "myApp" ng-controller= "Myctrl" > 2 <test-directive></test-directive> 3 < Script> 4 angular.module ("myApp", []) 5 . Controller ("Myctrl", function ($scope) { 6 $ Scope.data = { 7 name: "White as Flower" 8 }; 9 }) directive ("Testdirective", function () {One return { restrict: "E", Template: "The result is: white as flower, you can know that the Data.name in directive is the $scope.data.name of Myctrl controller.
So what about the closed directive. How closed, closed effect is what kind of, closed after how data interaction. These are the things that I have been groping about these days.
1 <body ng-app= "myApp" ng-controller= "Myctrl" > 2 <test-directive></test-directive> 3 < Script> 4 angular.module ("myApp", []) 5 . Controller ("Myctrl", function ($scope) { 6 $ Scope.data = { 7 name: "White as Flower" 8 }; 9 }) directive ("Testdirective", function () {One return { restrict: "E", scope: {}, Template: "The results appear as: undefined. So when you directive a definition, adding a property scope separates the scope of the directive from the scope of the parent controller.
Well, after opening and closing, get into the topic and how to interact with the data. Personally feel that data interaction is divided into: The parent controller gets the directive variable, directive gets the variable of the parent controller, the parent controller calls the directive function, and the function that invokes the parent controller.
1. The parent controller gets the directive variable. For example, encapsulates an input box to accept user input, the parent controller clicks the Search button to obtain user input:
1 <body ng-app= "myApp" ng-controller= "Myctrl" > 2 <p> name:{{outername}}</p> 3 < Test-directive inner-name= "Outername" ></test-directive> 4 <script> 5 angular.module (" MyApp ", []) 6 . Controller (" Myctrl ", function ($scope) { 7 }) 8 . di
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
