My Blog List

Wednesday, September 17, 2014

Directive example

directive

1. restrict

A 엘리먼트
E 속성
C 클래스


2. template or templateUrl

실제로 들어가게 되는 div

3. 특징
- directive는 새로운 scope를 생성할 수 없다
- scope를 부모로 부터 상속을 받는다
-

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

4. link fuction
- link에는 3개의 변수가 들어간다
- scope는 parent 스코프

5. scope의 종류는 두가지가 있다
- A child scope     -> scope:true
- An isolated scope -> scope:{}

childe scope 는 부모로부터 scope를 상속받는다
isolated scope 는 개별적으로 하나를 생성한다.

isolated scope는 부모의 scope를 사용할 수 없는것이 아니다.

6. @ 사용하기 (데이터 바인딩용)
- @ for One Way Text Binding
- 상위 컨트롤러의 color가 바뀌면 하위의 내용도 따로 바뀐다.

app.directive('helloWorld', function() {
  return {
    scope: {
      color: '@colorAttr'
    },
    ....
    // the rest of the configurations
  };
});


<body ng-controller="MainCtrl">
  <input type="text" ng-model="color" placeholder="Enter a color"/>
  <hello-world color-attr="{{color}}"/>
</body>


7. = 사용하기 (데이터 바인딩용)
= for Two Way Binding

app.directive('helloWorld', function() {
  return {
    scope: {
      color: '='
    },
    ....
    // the rest of the configurations
  };
});


8. & to Execute Functions in the Parent Scope

app.directive('sayHello', function() {
  return {
    scope: {
      sayHelloIsolated: '&amp;'
    },
    ....
    // the rest of the configurations
  };
});

<body ng-controller="MainCtrl">
  <input type="text" ng-model="color" placeholder="Enter a color"/>
  <say-hello sayHelloIsolated="sayHello()"/>
</body>



9. Parent Scope vs. Child Scope vs. Isolated Scope

Parent Scope : scope:fasle default
childe scope : scope:true   inherit parent scope
isolated scope :


10. The controller Function and require
app.directive('outerDirective', function() {
  return {
    scope: {},
    restrict: 'AE',
    controller: function($scope, $compile, $http) {
      // $scope is the appropriate scope for the directive
      this.addChild = function(nestedDirective) { // this refers to the controller
        console.log('Got the message from nested directive:' + nestedDirective.message);
      };
    }
  };
});

4번째 변수는 require 한 컨트롤러가 삽입된다.

app.directive('innerDirective', function() {
  return {
    scope: {},
    restrict: 'AE',
    require: '^outerDirective',
    link: function(scope, elem, attrs, controllerInstance) {
      //the fourth argument is the controller instance you require
      scope.message = "Hi, Parent directive";
      controllerInstance.addChild(scope);
    }
  };
});



reference site : http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/

No comments:

Post a Comment