Writing custom directives angular - coral-star.ru

AngularJS Documentation for directive

Using this powerful concept, AngularJS enables us to create new directives that we can encapsulate and simplify DOM manipulation. We can create directives that modify or even create totally new behavior in html. Here is an example of how that looks: myapp dule myapp myapp. Directive div function var directive ; strict 'E / restrict this directive to elements / directive. Template "My first directive: textToInsert return directive; Notice the call to the directive function on the module. In fact, AngularJS even gives you other options for invoking directives with name prefixes. These are all equivalent, as well: input type "text" ng-model "directivename" placeholder "name" / span ng-bind "directivename" /span span ng:bind "directivename" /span span ng_bind "directivename" /span span x-ng-bind "directivename" /span span data-ng-bind "directivename" /span Try it ng-binddirectivename : ng:binddirectivename : ng_binddirectivename : x-ng-binddirectivename : data-ng-binddirectivename. This is where well do most of the work when building directives, as this is where we can register listeners, set up watches, and add functionality. The result of this process is why the live data-binding exists between the scope and the DOM tree. When you call this function you can register a new directive. The first parameter to the directive function call is the name of the directive to register. This name is what you use in your html templates when you want to activate the directive. The er property is set to "user". That means, that the er property is bound to the property in the scope property (not in the isolate scope) with the name passed to the user attribute of the userinfo element. You can also use a value of AE which will match both html element names and attribute names. The template field is an html template that will replace the content of the matched div element. This function should return a directive definition when invoked. AngularJS will invoke this function to obtain a JavaScript object which contains the definition of the directive. If you look inside the function in the above example you will see that it does indeed return a JavaScript object.