dimanche 26 juin 2016

Having trouble referencing a scope property, yet it's parent object is 'visible'?

In my application, I have a pie chart using the nvd3 library. In the js code below, I need to reference a property called ccirCategoryIncidentI in an object called 'vm'. ccirCategoryIncidentI value is an integer that will represent the size of a wedge in the pie Chart.

What I've done is wrapped the function in a $timeout. And for now, all I did was console.log the object which returns the object as expected (with the ccirCategoryIncidentI property listed when I open the log)

console.log(scope.vm)

enter image description here

HOWEVER, what puzzles me is when I do a console.log of the targeted property, it returns undefined?

console.log(scope.vm.ccirCategoryIncidentI);

When this is clearly shown in the vm object, i don't know why the property is coming back undefined?

Here is the full js code:

(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';
        }

    }
}
})();

Aucun commentaire:

Enregistrer un commentaire