Home > Developer > Web Develop
As for my superficial understanding of directive, it is generally used for the encapsulation of independent DOM elements, where the application is separated from the control reuse and the logical module. The latter I am not in touch, but the data interactive part is the same. So give some examples of the former in case you forget later. The scope of the directive itself $scope can be selected whether closed, not closed, and its controller shared a scope $scope. Examples are as follows:<body ng-app= "myApp" ng-controller= "Myctrl" ><test-directive></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Data={name:"White as a flower" }; }). directive ("Testdirective",function(){ return{restrict:E, Template:" } });</script></body>The result is: white, such as flowers, you can know directive in the Data.name is Myctrl controller $scope.data.name. What about the closed directive? How closed, closed effect is what, closed after how data interaction? These are the things I have been groping for the past few days. <body ng-app= "myApp" ng-controller= "Myctrl" ><test-directive></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Data={name:"White as a flower" }; }). directive ("Testdirective",function(){ return{restrict:E, scope: {}, Template:" } });</script></body>the results are displayed as: undefined. So when directive is defined, adding a property scope separates the scope of the directive from the scope of the parent controller. Well, after opening and closing, get to the topic and how to interact with the data. Personal data interaction is divided into: The parent controller gets directive variables, directive gets the variables of the parent controller, the parent controller calls the directive function, and directive calls the parent controller's function. 1the parent controller gets the directive variable. For example, encapsulate an input box to accept user input, the parent controller clicks the Search button to get user input:<body ng-app= "myApp" ng-controller= "Myctrl" ><p> name: {{outername}}</p><test-directive Inner-name= "Outername" ></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {}). directive ("Testdirective",function(){ return{restrict:E, scope: {innername:"="}, Template:"<input type= ' text ' ng-model= ' innername ' placeholder= ' White like flowers ' >" } });</script></body>The results are as follows: Analysis: From the data flow to the testdirective, a single input input is bound in Innername, Innername is a variable owned by the directive private scope, and the external controller cannot be used directly. by Innername:"=" is passed to inner-in HTMLthe Name property, while innerThe-name property is bound to the outername variable of the external controller, so it is finally displayed on the top <p>label. The code above is equivalent to the following code:<test-directive name= "Outername" ></test-directive>scope: {innername:"=name"}, by Inername:"=" becomes innername: "=name", and the HTML attribute binding is also made by inner-name becomes the name. 2. directive gets the variable for the parent controller. This application should be quite a lot of, such as the public header and footer, public display panel and so on. This one, with the above example,"=" can be implemented, so we know that "=" is a two-way binding. But what do we do to prevent directive from accidentally modifying the data inside? So one-way binding "@"on the show. <body ng-app= "myApp" ng-controller= "Myctrl" ><input type= ' text ' ng-model= ' outername ' placeholder= ' White like flowers ' > <test-directive inner-name= "{{outername}}" ></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {}). directive ("Testdirective",function(){ return{restrict:E, scope: {innername:"@"}, Template:"<p> name:{{innername}}</p>" + "<button ng-click= ' innername=innername+1 ' > click </button>" } });</script></body> It is worth noting that the @ attribute binding in HTML requires {{}} to open the identity, and = is not used. My understanding is that for a parent controller, @ is data passing, and =is data binding, so there are these differences. A button is added to the directive to verify that the modified data stepfather controller has changed, resulting in= There is a change, @ No change, it is easy to conclude:is a two-way binding, @ is a two-way binding. 3. Directive a function that invokes the parent controller. Applications, temporarily unexpected (Khan). Variable with= and @ To pass, function is used &. Examples are as follows:<body ng-app= "myApp" ng-controller= "Myctrl" ><p> name: {{outername}}</p><test-directive on-click= "Click (name)" ></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Click=function(name) {$scope. Outername= Name | | "White as a flower"; }}). directive ("Testdirective",function(){ return{restrict:E, scope: {onClick:"&"}, Template:"<input type= ' text ' ng-model= ' innername ' placeholder= ' White like flowers ' >" + "<button ng-click= ' OnClick ({Name:innern AME}) ' > Click </button> ' } });</script></body>The data passing process is similar to the example above, the only thing to note is that when a parameter is passed, {name:innername} is a formal parameter, and the latter is an argument. parameters, the parameter order is not important, and formal parameter one by one corresponds. 4the parent controller calls the directive function. This is one of the difficulties encountered in the previous period, the situation is more complicated than others. Applications are also common, such as initializing, resetting, and so on. <body ng-app= "myApp" ng-controller= "Myctrl" ><button ng-click= "click ()" > Reset </button>< Test-directive action= "Action" ></test-directive><script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Action= {}; $scope. Click=function() {$scope. Action.reset (); }}). directive ("Testdirective",function(){ return{restrict:E, scope: {action:"="}, Template:"<input type= ' text ' ng-model= ' name ' placeholder= ' White as Flower ' >", Controller:function($scope) {$scope. Action.reset=function() {$scope. Name= "White as flower" } } } });</script></body> once again used =, using the JS function is also the principle of the property. Seems to have understood =bidirectional binding, it is easy to invoke the directive intrinsic function. But what about initialization? The first thing to think about is a similar=to reference the pass:<body ng-app= "myApp" ng-controller= "Myctrl" ><test-directive action= "action" ></test-directive> <script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Action= {}; $scope. Action.init (); }). directive ("Testdirective",function(){ return{restrict:E, scope: {action:"="}, Template:"<input type= ' text ' ng-model= ' name ' placeholder= ' White as Flower ' >", Controller:function($scope) {$scope. Action.init=function() {$scope. Name= "White as flower" } } } });</script></body> But the operation found that the error shows $scope.action.init is not afunctionTo see if the hint should be run to line 7th, $scope. The Action.init function is not yet defined. What do we do? Try before you mention the controller to Directive? is the same as error. Well, you can execute the $scope.name directly in the directive controller without a function .= "White as flower", it seems perfect, but what if there is an initialization of parameters? In fact, after JS separation, I encountered the problem is based on the return of the HTTP request to initialize the directive, because the network speed is not necessarily, resulting in the control initialization is not necessarily the return of the HTTP request (no valid initialization parameters), There is no guarantee that the directive is initialized after the HTTP request is returned (cannot be used=to make a function call). Requirements are clear, if you can monitor parameter changes, and then perform the initialization, at this time can ensure that the directive has been loaded, and have valid parameters. Just ANGULARJS provided the $watch. The code is as follows:<body ng-app= "myApp" ng-controller= "Myctrl" ><test-directive action= "action" ></test-directive> <script>Angular.module ("MyApp", []). Controller ("Myctrl",function($scope) {$scope. Action= {Name: "White as Flower"}; }). directive ("Testdirective",function(){ return{restrict:E, scope: {action:"="}, Template:"<input type= ' text ' ng-model= ' name ' placeholder= ' White as Flower ' >", Link:function(Scope, Elem, attrs) {scope. $watch (Attrs.action,function(value) {scope.action.init (); })}, controller:function($scope) {$scope. Action.init=function() {$scope. Name=$scope. Action.name}} } });</script></body> This is my superficial understanding of directive data interactions. For more information, please refer to the official documentation: HTTPS://docs.angularjs.org/guide/directive
Detailed data interactions for custom directive in Angularjs
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
