在我的应用程序中,我有一个使用nvd3库的饼图。在下面的js代码中,我需要在一个名为' vm'的对象中引用一个名为ccirCategoryIncidentI的属性。 ccirCategoryIncidentI值是一个整数,表示饼图中楔形的大小。
我所做的是将函数包装在$ timeout中。而就目前而言,我所做的只是console.log按预期返回对象的对象(打开日志时列出了ccirCategoryIncidentI属性)
console.log(scope.vm)
然而,令我困惑的是,当我执行目标属性的console.log时,它返回undefined?
console.log(scope.vm.ccirCategoryIncidentI);
如果在vm对象中清楚地显示了这一点,我就不知道为什么该属性未定义?
这是完整的js代码:
(function() {
'use strict';
/* jshint quotmark: false */
angular
.module('jlocwebApp')
.directive('ccirSummary', ccirSummary);
ccirSummary.$inject = ['$window', 'Accessibility', 'Tools', 'ccirSummaryChartConfig', '$timeout'];
function ccirSummary($window, Accessibility, Tools, ccirSummaryChartConfig, $timeout)
{
var directive = {
restrict: 'E',
scope: {
vm: '='
},
link: ccirSummaryLink,
templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummary.html'
};
return directive;
function ccirSummaryLink(scope, element /*, attrs*/)
{
$timeout(function() {
console.log(scope.vm);
console.log(scope.vm.);
//console.log(JSON.stringify(scope.vm));
scope.options = ccirSummaryChartConfig.getChartConfig();
//console.log(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';
}
}
}
})();