Another talk about ANGULARJS Directive directive

I've written an article before, http://www.cnblogs.com/keatkeat/p/3903673.html.

But some parts of the writing are not very clear, and even a bit wrong, so today specifically here to talk about.

This article is mainly about the separation of instructions and controller communication.

The operation of the instruction basically can be understood simply as: Pre-Link, controller, compile, template--

We usually just use the post link, but if your instructions are nested and the child needs some of the values of the parent layer, consider writing these initial values to the controller or to the Pre-Link

Pre-Link is called from the upper layer to the lower layer, and Post-link is the opposite to the upper call.

When a content is frequently duplicated in development, we encapsulate it as an instruction.

The idea of this component can save a lot of development time.

The encapsulated instructions are unlikely to be identical to each use.

So we have to be able to adjust it.

Generally, we use attr. (as well as functions and parameters)

<div ng-controller= "Ctrl" >    <dir data-param= "Ten" ></dir></div><script>     var app = Angular.module ("app", []);    App.directive ("dir", [function  () {        return  {            "E",                           function  (scope, Elem, attr) {                log (attr.param);}}    ]);    App.controller (function  ($scope) {    }]); </script>

By attr we can pass in some strings, attr can only pass in simple strings oh, you can not put properties oh

<dir data-param= "SomeAttr" ></dir> this is wrong.

<dir data-param= "{{someattr}}" ></dir> this is true.

There is a situation where we pass in the property name, and in the link function we use the $parse (attr) (scope) to get the value, which is not ideal, because it can only be run without isolating scope.

Whether to use isolation scope, I personally do not have a special idea, as long as you carefully use it.

I personally prefer to use isolation.

Isolate the difference between scope "=", "@", "&"

Isolation scope puts the value of the attr into the scope of the directive

When we want to pass in a attr, think about whether the instruction will modify the attr value.

If it is not so please use @, will use "="

In the case of "@", attr passed in a string

<dir data-param= "{{someattr}}" ></dir> if you want to pass a property

<dir data-param= "string" ></dir> simple pass Value

"=" case, attr passed in the property name

<dir data-param= "SomeAttr" ></dir>

Remember the same as if the property name, because "=" for bidirectional synchronization, the inside may change the outside, so there must be a property to install this value, if not, it will be error Oh! So you have to figure out the logic as well!

& is used to pass the method.

<div ng-controller= "Ctrl" > <dir data-some-method= "SomeMethod ($event, Someparam,insidescope)" ></dir > <!--here must show clear Param's name--></div><script>varApp = Angular.module ("app", []); App.directive ("Dir", [function () {        return{restrict:E, Template:' <div ng-click= ' SomeMethod ({$event: $event, Someparam:data, insidescope:this}) ">click</div>", Link:function(Scope, Elem, attr) {Scope.data= "100"; Scope.somemethod ({$event:"Z", Someparam: "GG"});//call is an incoming property}, Scope: {somemethod:"&"            }        }    }]); App.controller ("Ctrl", ["$scope",function($scope) {$scope. SomeMethod=function($event, Someparam, Insidescope) {
Here's this = $scope
If you want to operate the scope within the command, you can pass in the log ($event) via param; Log (Someparam); // -        }    }]);</script>

What is not clear here is why it is necessary to define the name and number of the Param.

If you do not use &, "=" can also do this work, "=" can be passed the method, but "@" do not oh (not quite understand)

If the interior of the instruction is complex, then you may need to $watch attr to render your view

If your attr value is modified externally, your template cannot satisfy the modified rendering.

Another talk about ANGULARJS Directive directive