서로 다른 디렉티브에서 동일한 컨트롤러를 사용는 방법과 디렉티브의 require를 사용하여 의존성을 삽입, 컨트롤러를 사용하는 방법에 대하여 알아보려합니다.

# 동일한 컨트롤러 사용하기


먼저 다른 디렉티브에서 동일한 디렉티브를 사용하는 방법입니다. 아래의 개별 디렉티브는 동일한 컨트롤러를 사용하도록 설정되었습니다.

<body ng-app="myApp" ng-controller="userController as myCtrl">
  <div user-name>
  </div>
  <div user-email>
  </div>
</body>


아래는 userName와 userEmail 디렉티브 내용입니다.

myApp.controller('userController', function() {
  return function($scope) {
  }
});

myApp.directive('userName', function() {
  return function() {
    controller: myCtrl
  };
});

myApp.directive('userEmail', function() {
  return function() {
    controller: myCtrl
  };
});

이제 위 두 디렉티브 userName그리고 userEmail은 myCtrl을 공유하여 사용합니다.



# require를 선언한 컨트롤러 사용


먼저 require는 다른 컨트롤러를 사용하게해줍니다. 사용할 컨트롤러를 가진 디렉티브를 require에 선언하고 이를 link 함수에 사용하여 내부 컨트롤러를 가져오는 방법입니다. 선택 가능한 접두어 값으로 아래와 같이 설정 가능합니다.
  • 없음 : 동일한 엘리먼트인 경우
  • ^ : 부모에서 해당 컨트롤러를 찾음

아래는 예제코드입니다.
<div user-info>
  <div user-email>
    <div user-addr></div>
​​​​​​  </div>
<div>

아래는 userEmail에서 userInfo에 접근하는 코드입니다.

myApp.directive('userInfo', function() {
controller: function() {
this.getUserInfo = function () {
console.log('done');
};
}
});


myApp.directive('userEmail', function() {
  return function() {
require: "^userInfo",
link: function(scope, attr, element, userCtrl) {
scope.userCtrl = userCtrl;
}
  };
});

​​컨트롤러를 사용할 수 있게되었습니다.
code snippet widget