0
Я хочу создать новую директиву AngularJS (outer-directive), которая обертывает некоторый контент (например, html или другие директивы) и создает динамически небольшую навигацию с левой стороны.Трансляция содержимого вложенной директивы во внешнюю директиву
Этот образец не работает. Директива content-section предназначена только для группировки директив content в левом меню и не нуждается в разметке. В директиве content должно быть указано, что это запертый контент в заполнителе outer-directive, только если он активен.
У кого-нибудь есть идея или намек на то, как решить эту проблему с помощью AngularjS 1.5?
Пример в псевдокоде:
<outer-directive>
<content-section heading="Section 1">
<content heading="Content 1 in Section 1">
<!-- some HTML or other directives, etc -->
</content>
<content heading="Content 2 in Section 1">
<!-- some HTML or other directives, etc -->
</content>
</content-section>
<content-section heading="Section 2">
<content heading="Content 1 in Section 2">
<!-- some HTML or other directives, etc -->
</content>
</content-section>
</outer-directive>шаблона Директива:
<div class="row">
<div class="col-sm-3">
<!-- some kind of left side menu (want to use uib-accordion directive here) -->
<ul>
<li ng-repeat="contentSection in contentSections">
<h3>{{contentSection.heading}}</h3>
<ul>
<li ng-repeat="content in contentSection">
<a href ng-click="showContent(content.$id)">{{content.heading}}</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9">
<!-- show active content here with ng-if -->
<ng-transclude></ng-transclude>
</div>
</div>директив псевдокод:
angular.module('myApp')
.directive('outerDirective',
[
function() {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: 'outer-template.html',
controller: [
'$scope',
function($scope) {
$scope.contentSections = [];
this.addContentSection = function(contentSectionScope) {
var that = this;
$scope.contentSections.push(contentSectionScope);
contentSectionScope.$on('$destroy',
function(event) {
that.removeContentSection(contentSectionScope);
});
};
this.removeContentSection = function(contentSectionScope) {
var index = $scope.contentSections.indexOf(contentSectionScope);
if (index !== -1) {
$scope.contentSections.splice(index, 1);
}
};
// ...
}
]
}
}
])
.directive('contentSection',
[
function() {
return {
restrict: 'E',
require: '^outerDirective',
transclude: true,
replace: true,
//template: '',
scope: {
heading: '@'
},
controller: [
'$scope',
function($scope,) {
$scope.contents = [];
this.addContent = function (contentScope) {
var that = this;
$scope.contents.push(contentScope);
contentScope.$on('$destroy',
function (event) {
that.removeContent(contentScope);
});
};
this.removeContent = function (contentScope) {
var index = $scope.contents.indexOf(contentScope);
if (index !== -1) {
$scope.contents.splice(index, 1);
}
};
}
],
link: function (scope, element, attrs, outerCtrl) {
outerCtrl.addContentSection(scope);
}
}
}
])
.directive('content',
[
function() {
return {
restrict: 'E',
require: '^contentSection',
transclude: true,
template: '<div ng-transclude></div>',
scope: {
heading: '@'
},
controller: [
'$scope',
function ($scope) {
}
],
link: function (scope, element, attrs, contentSectionCtrl) {
contentSectionCtrl.addContent(scope);
}
}
}
]);;