0
'vm'이라는 객체에 범위를 전달하는 사용자 지정 명령이 있습니다. 해당 객체에는 액세스해야하는 속성/값 쌍이 있습니다 (ccirCategoryIncidentI : 3). 기본 console.log 함수를 사용하여 전달 된 것을 확인합니다.각도 스크립트가로드 될 때 변수가 정의되지 않음
console.log(scope.vm.ccirCategoryIncidentI)
로그가 정의되지 않은 상태로 출력됩니다. 값을 인쇄하는 settimeout() 내에 해당 로그를 래핑 한 후에 만 가능합니다.
지시어가 다음 로직을 실행하기 전에 속성 값을 "로드"하는 것이 더 좋은 아이디어인지 알고 싶습니다. 내 코드에서 파이 차트 쐐기 크기를 채우려면 'ccirCategoryIncidentI'변수가 필요합니다. 원형 차트는 렌더링되지 않습니다. 왜냐하면 해당 속성은 처음에 '정의되지 않음'이기 때문입니다.
(function() {
'use strict';
/* jshint quotmark: false */
angular
.module('mybApp')
.directive('ccirSummary', ccirSummary);
ccirSummary.$inject = ['$window', 'Accessibility', 'Tools', 'ccirSummaryChartConfig'];
function ccirSummary($window, Accessibility, Tools, ccirSummaryChartConfig)
{
var directive = {
restrict: 'E',
scope: {
vm: '='
},
link: ccirSummaryLink,
templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummary.html'
};
return directive;
function ccirSummaryLink(scope, element /*, attrs*/)
{
console.log(scope.vm.ccirCategoryIncidentI)
scope.options = ccirSummaryChartConfig.getChartConfig();
console.log(scope.ccirCategoryIncidentI);
scope.data = [
{
key: 'CAT I',
y: 2,
MyAttribute1:'DLA Avn ... CAT I',
MyAttribute2:'DLA Energy ... CAT I'
},
{
key: 'CAT II',
y: 1,
MyAttribute1:'DLA Avn ... CAT II',
MyAttribute2:'DLA Energy ... CAT II'
},
{
key: 'CAT III',
y: 3,
MyAttribute1:'DLA Avn ... CAT III',
MyAttribute2:'DLA Energy ... CAT III'
},
];
var lastUpdatedDateTime;
var forceUpdate = false;
scope.$watch('vm.ccirdata' , function (newValue)
{
// We need to have some logic in here to determine if the inbound data is different from the already displayed data
if (newValue && (newValue.lastUpdatedDateTime !== lastUpdatedDateTime || forceUpdate))
{
updateChart();
}
});
var tooltip = Tools.buildTooltip ({
base: element,
tipText: getccirHintText
});
// Controls
var openControls, resolvedControls;
var newOpenLabelId = 'iss-open-total';
var resolvedLabelId = 'iss-resolved-total';
var openPrefix = 'iss-con-open-';
var visOpenPrefix = 'iss-vis-open-';
var resolvedPrefix = 'iss-con-resolved-';
var visResolvedPrefix = 'iss-vis-resolved-';
var openNavId, resolvedNavId, activeFocusId, lastBlurId;
// Set up entry point into navigation content
d3.select ('#' + newOpenLabelId)
.on ('keydown', function()
{
tileKeyAction ('open');
});
d3.select ('#' + resolvedLabelId)
.on ('keydown', function()
{
tileKeyAction ('resolved');
});
function updateChart()
{
// Build Visual Elements
var data = scope.vm.ccirdata;
// Build Focus Controls and Navigation
createFocusControls (data);
assignNavigationIds();
if (activeFocusId)
{
d3.select ('#' + activeFocusId) [0][0].focus();
}
}
function getccirHintText (data)
{
var ccirEventHint = getccirDataForEvent (data.ccirData, data.side);
return [
'<div class="ccir-legend">',
'<div class="cooltip-label"><div class="cooltip-label is-',
data.ccirData.impact.toLowerCase(),
'"></div> ',
(data.side==='left'?'OPEN ':'RESOLVED '),
data.ccirData.impact.toUpperCase(),
' ccirs:<hr class="hr-' + data.ccirData.impact.toLowerCase() + '"></div>',
'<div class="cooltip-text"></div>',
ccirEventHint.ccirs.join(''),
'<div class="cooltip-text"></div>',
'</div>'
].join('');
}
function getccirDataForEvent(selectedBar, side)
{
var ccirs = [];
var selectedImpact = selectedBar.impact.toLowerCase();
var detailData = scope.vm.ccirdata.detail;
var is_string;
for(var i=0; i<detailData.length;i++)
{
var d = detailData[i];
if ((isLeftOrRight(d) === side) && (d.impact.toLowerCase() === selectedImpact))
{
is_string = '<div class="cooltip-text"><div class="is-tt-new is-tt-'+d.impact.toLowerCase()+'">'+(d.isNew?'NEW':'')+
'</div><div class="is-tt-text"><span class="is-tt-number">'+ d.number + ':</span> '+d.title +'</div></div>';
ccirs.push(is_string);
}
}
var ccirEventHint =
{
'ccirs' : ccirs
};
return ccirEventHint;
}
function isLeftOrRight(ccir)
{
if ((ccir.status.toLowerCase() === 'final') || (ccir.status.toLowerCase() === 'initial/final') || (ccir.status.toLowerCase() === 'updated/final'))
{
return 'right';
}
else
{
return 'left';
}
}
// Keyboard Interface
function createFocusControls (nodes)
{
// New/Open Controls
var result = Accessibility.buildControls ({
navigatorId: 'iss-navigation',
focusId: 'iss-open-focus-controls',
prefix: openPrefix,
visPrefix: visOpenPrefix,
setData: nodes.open.counts,
getId: function (d) { return d.impact.toLowerCase();},
navCheck: function (d) { return d.count > 0;},
other: {
optId: function() { return 'left';}
},
keyListener: keyAction,
focusListener: focusButton,
blurListener: blurButton
});
openControls = result.controls;
openNavId = result.topnav;
// Resolved Controls
result = Accessibility.buildControls ({
navigatorId: 'iss-navigation',
focusId: 'iss-resolved-focus-controls',
prefix: resolvedPrefix,
visPrefix: visResolvedPrefix,
setData: nodes.resolved.counts,
getId: function (d) { return d.impact.toLowerCase();},
navCheck: function (d) { return d.count > 0;},
other: {
optId: function() { return 'right';}
},
keyListener: keyAction,
focusListener: focusButton,
blurListener: blurButton
});
resolvedControls = result.controls;
resolvedNavId = result.topnav;
}
// Creates a bilateral circular linked list of all control elements
// paired with visual controls
function assignNavigationIds()
{
// Open Controls
Accessibility.buildNav ({
looped: true,
base: openControls,
skipCheck: function (d) { return d.count === 0;},
nodeText: function (d) { return d.impact + ' ' + d.count;},
detailText: function (d) {
var ccirEventHint = getccirDataForEvent(d, 'left');
return '<div>. new/open ' + d.impact + ' ccirs. ' + ccirEventHint.ccirs.join (',') + '</div>';
}
});
// Resolved Controls
Accessibility.buildNav ({
looped: true,
base: resolvedControls,
skipCheck: function (d) { return d.count === 0;},
nodeText: function (d) { return d.impact + ' ' + d.count;},
detailText: function (d) {
var ccirEventHint = getccirDataForEvent(d, 'right');
return '<div>. resolved ' + d.impact + ' ccirs. ' + ccirEventHint.ccirs.join (',') + '</div>';
}
});
}
// Main key handler
function keyAction (e, d)
{
var id, el, optId;
function getSide (e)
{
return d3.select ('#' + e.target.id).attr ('optid').toLowerCase();
}
// Check for type of key pressed
if (!e)
{
return;
}
switch (e.keyCode)
{
case Accessibility.previous:
// Handle left arrow key (previous)
Accessibility.focusPrevious (e);
break;
case Accessibility.next:
// Handle right arrow key (next)
Accessibility.focusNext (e);
break;
case Accessibility.leavelist:
// Arrow up to the appropriate section header label depending on which 'side' we're on
el = d3.select ('#' + e.target.id);
optId = el.attr ('optid');
if (optId === 'left')
{
// Focus on new/open
d3.select ('#' + newOpenLabelId) [0][0].focus();
}
else if (optId === 'right')
{
// Focus on resolved
d3.select ('#' + resolvedLabelId) [0][0].focus();
}
// Turn off tabbing for whatever the last focused element was
d3.select ('#' + lastBlurId).attr ('tabindex', '-1');
break;
default:
if (Accessibility.isActivated (e))
{
// Activate and display the popup as per mouse click
// Pull up the previously defined optional ID to determine which side the control belongs to
id = e.target.id;
if (tooltip.isShowing)
{
tooltip.hide();
d3.select ('#' + id + '-text').attr ('class', 'aria-show');
d3.select ('#' + id + '-detail').attr ('class', 'aria-hide');
}
else
{
// Display Popup
var tileBbox = element [0].getBoundingClientRect();
el = d3.select ('#' + id) [0][0];
el.blur();
setTimeout (function() {
tooltip.show ({ccirData:d, side:getSide (e)}, [tileBbox.left, tileBbox.top]);
d3.select ('#' + id + '-text').attr ('class', 'aria-hide');
d3.select ('#' + id + '-detail').attr ('class', 'aria-show');
el.focus();
}, 100);
}
}
else if (e.keyCode === Accessibility.keyCode.tab)
{
if (e.shiftKey && getSide (e) === 'right')
{
d3.select ('#' + resolvedLabelId) [0][0].focus();
}
else if (!e.shiftKey && getSide (e) === 'left')
{
d3.select ('#' + newOpenLabelId) [0][0].focus();
}
}
}
}
}
}
})();
수정 : 여기에 dev 도구의 개체 스크린 샷이 있습니다. 오른쪽 객체는 'vm'객체입니다.
내가이 점 참조 - (scope.vn..ccirCategoryIncidentI)을 console.log를 귀하의 코드에 –
그건 문제가 될 수 있습니다 - :) –
미안 해요 오타입니다. 그건 문제가 아니야! –