0
編集：詳細も追加しました。別の指令内の単純な角度指令 - コントローラの有効範囲にどのように値を渡すか
私の指示で選択した値をコントローラ$scopeに渡すことで助けてもらえます。
私は非常に基本的な指令を別の指令の中に置いていますが、その値はコントローラのスコープに渡されません。私は私のパラメータのための "未定義"の値を取得します。
しかし、小さなディレクティブは、他のディレクティブのタグ内ではなく、ビューのHTMLのどこにでも置くと機能します。
これが私の新しいディレクティブです：
(function() {
'use strict';
angular.module('portalDashboardApp')
.directive('ogItemsPerPage', function() {
return {
restrict: 'E',
replace: true,
templateUrl: './tpls/ItemsPerPageTemplate.html',
scope: {
perPageCountOptions: [30, 50, 100, "ALL"],
selectedItemsPerPage: '@'
}
};
});
})();
これはテンプレートです：
<div>
<div id="DropDownBox">
<label for="ItemsPerpage">Items per Page: </label>
<select ng-change="changePageCount()" ng-model="selectedItemsPerPage" id="ItemsPerpage" ng-options="perPage for perPage in perPageCountOptions"></select>
</div>
</div>
これは私のコントローラに呼び出される関数です：
$scope.changePageCount = function() {
if ($scope.selectedItemsPerPage === "ALL") {
$scope.perPageCount = -1;
}
else {
$scope.perPageCount = $scope.selectedItemsPerPage;
}
pullSocialData();
}
これは私が別の指令のタグ内に、私の<og-items-per-page>ディレクティブを配置しています図である。
<og-data-box heading="Tweet List" link="" uid="socialMentionsMeta" description="">
<div class="dataStatus">
{{dataStatus}}
<og-loading-indicator></og-loading-indicator>
</div>
<og-items-per-page></og-items-per-page>
<div class="dataContent" ng-show="dataContent" ng-mouseover="showGraphTrainingInfo()">
<og-social-media-mentions-list></og-social-media-mentions-list>
<div ng-show="showMorePostLoading" id="morePostLoadingContainer"><div id="morePostLoadingInner"></div></div>
</div>
</og-data-box>
データボックスディレクティブ：
(function() {
'use strict';
angular.module('portalDashboardApp')
.directive('ogDataBox', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
heading: '@',
link: '@',
uid: '@',
description: '@',
chartConfig: '@'
},
link: function (scope) {
scope.boxOpenCloseTitle = 'Collapse';
scope.iconStatus = 'upIcon';
scope.contentStatus = '';
var openCloseStatus = true;
var maximumSize = false;
scope.dataBoxUnderlayClass = '';
scope.dataBoxMaxMinClass = '';
scope.maxMinIcon = 'maximise';
scope.openCloseDataBox = function() {
if (openCloseStatus) {
scope.boxOpenCloseTitle = 'Expand';
openCloseStatus = false;
scope.iconStatus = 'downIcon';
scope.contentStatus = 'hideContent';
}
else {
scope.boxOpenCloseTitle = 'Collapse';
openCloseStatus = true;
scope.iconStatus = 'upIcon';
scope.contentStatus = '';
}
};
scope.maxMinDatabox = function() {
maximumSize = !maximumSize;
if (maximumSize) {
scope.dataBoxUnderlayClass = 'dataBoxUnderlayFullScreen';
scope.dataBoxMaxMinClass = 'dataBoxMaximised';
scope.maxMinIcon = 'minimise';
}
else {
scope.dataBoxUnderlayClass = '';
scope.dataBoxMaxMinClass = '';
scope.maxMinIcon = 'maximise';
}
};
},
templateUrl: './tpls/DataBoxTemplate.html'
};
});
})();
データボックステンプレート：
<div ng-class="dataBoxUnderlayClass">
<section class="dataBox" id="{{uid}}" ng-class="dataBoxMaxMinClass">
<header class="dataBoxHeader">
{{heading}}
<img src="images/openCloseIcon.svg" title="{{boxOpenCloseTitle}}" width="15" height="15" class="openCloseBox {{iconStatus}}" ng-click="openCloseDataBox()" />
<img ng-mouseover="infoIconStyle='dataBoxInfoContentShow'" ng-mouseleave="infoIconStyle='dataBoxInfoContentHide'" src="images/info-icon.svg" height="15" class="dataBoxInfo" />
</header>
<div class="dataBoxContent {{contentStatus}}">
<div ng-class="infoIconStyle" class="dataBoxInfoContent">{{description}}</div>
<div ng-transclude></div>
</div>
</section>
</div>
必要に応じて他のディレクティブ内でディレクティブをネストできるように、変更する必要があるのは何ですか？
ありがとうございました！
'og-data-box'定義を追加できますか？ – Tako
更新を掲載しました。ありがとうございました！ – onmyway
下記の私のコメントを参照 – Tako