AngularJS Directive

Posted by On 9月 20, 2015 0 Comment

Directive

Directive is element set and realize dual direction binding.
For developers, it is UI parts, or template or something.

Easy Example

<!DOCTYPE html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
    <script src="/bower/angular/angular.min.js"></script>
</head>
<body>
<div class="container">
    <input type="text" ng-model="name" />
    <span>{{name}}</span>
    <div attr="{{name}}"></div>
</div>
</body>
</html>

This example is base on nodejs, express.
Nothing special in javascript.

UI Set in JS

Next is another examples.

javascripts/directive/app.js Angular JS Code

var app = angular.module('directiveApp', []);

app.controller('Controller', ['$scope', function($scope) {
        $scope.person = {
            name: 'Kotori',
            age: '17',
            number: 2
        };
    }]);

app.directive('member', function() {
    return {
            template: 'Name: {{person.name}} Age: {{person.age}} Number: {{person.number}}'
    };
});

app.directive('directiveTest', function(){
   return {
       restrict: 'EAC',
       priority: 0,
       transclude: true,
       replace: false,
       templateUrl: '/directive/directivetest.html',
       scope: {
           directiveTest: '=',
           onChange: '&',
           title: '@'
       },
       link: function postLink(scope, element, attrs, ctrl){
       },
       controller: ['$scope', function($scope){

       }]
   };
});

directive.ejs View

<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
    <script src="/bower/angular/angular.min.js"></script>
    <script src="/javascripts/directive/app.js"></script>
</head>
<body>
<div class="container">
    <input type="text" ng-model="name" />
    <span>{{name}}</span>
    <div attr="{{name}}"></div>
    <div ng-controller="Controller">
        <div member>
        </div>

        <div directive-test>
        </div>
    </div>
</div>
</body>
</html>

directive.html Template

<h3>I am big</h3>
<h3>We are...</h3>

Finally, we can create UI parts with events

Directive Parameter

Next is directive parameters

Name Description
restrict The kind of node in html(‘E’: Tag, ‘A’: Attribute, ‘C’: Class, ‘M’: comment
priority The priority to process Bigger is high priority
transclude
template/templateUrl HTML, templateUrl is html template file
scope
link
require

Ref

AngularJSのDirectiveを理解する.

TOPICS