Это приложение должно использовать console.log-контроллер "первой" директивы, почему этого не происходит? Я почти уверен, что это может работать нормально. "вторая" директива получает шаблон с "третьим" от attrs и добавляет его. Третья директива требует "сначала".
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div first>123</div>
</body>
</html>
angular.module('myApp', [])
.directive('first', function() {
return {
restrict: 'A',
link: postLink,
template: '<div second="<div third></div>"></div>',
controller: function() {}
};
function postLink(scope, element, attrs) {}
})
.directive('second', function($compile) {
return {
restrict: 'A',
link: postLink
};
function postLink(scope, element, attrs) {
var link = $compile(attrs.second);
element
.empty()
.append(link(scope));
}
})
.directive('third', function() {
return {
restrict: 'A',
require: '?^first',
link: postLink,
template: '<h1>Third</h1>'
};
function postLink(scope, element, attrs, FirstCtrl) {
console.log(FirstCtrl);
}
})
Проблема в том, что вы компилируете свой элемент перед добавлением его к его родительскому элементу, поэтому во время компиляции у элемента нет родителя и, очевидно, нет родительских контроллеров.
Вам нужно скомпилировать дочерний элемент только после добавления его к родительскому элементу.
var child = angular.element(attrs.second)
element.empty().append(child);
$compile(child)(scope);
Вам нужно написать функциональность в части контроллера директивы
.directive('first', function() {
return {
restrict: 'A',
link: postLink,
template: '<div second="<div third></div>"></div>',
controller: function() {
console.log('write functionality here');
}
};