无法引用范围属性,但它的父对象是可见的'?

时间:2016-06-26 19:48:46

标签: javascript jquery angularjs object d3.js

在我的应用程序中,我有一个使用nvd3库的饼图。在下面的js代码中,我需要在一个名为' vm'的对象中引用一个名为ccirCategoryIncidentI的属性。 ccirCategoryIncidentI值是一个整数,表示饼图中楔形的大小。

我所做的是将函数包装在$ timeout中。而就目前而言,我所做的只是console.log按预期返回对象的对象(打开日志时列出了ccirCategoryIncidentI属性)

console.log(scope.vm)

enter image description here

然而,令我困惑的是,当我执行目标属性的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>&nbsp;',
            (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';
        }

    }
}
})();

0 个答案:

没有答案