Переменная не определена при загрузке углового скрипта

Question

У меня есть настраиваемая директива, которая передает в своей области объект с именем «vm». У этого объекта есть пара свойств/значений, на которые мне нужно получить доступ (ccirCategoryIncidentI: 3). Я делаю основную функцию console.log, чтобы подтвердить это получение прошло в:

console.log(scope.vm.ccirCategoryIncidentI) 

Журнал выходит как неопределенные. Только после того, как я завершу этот журнал внутри параметра settimeout(), значение будет напечатано.

Я хотел знать, есть ли идеи, чтобы «загрузить» значения свойств, прежде чем директива начнет запускать свою последующую логику. В моем коде мне нужна переменная ccirCategoryIncidentI, чтобы заполнить размер клина круговой диаграммы. Эта круговая диаграмма не будет отображаться, потому что это свойство изначально «undefined».

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

    // 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(); 
        } 
       } 
      } 

     } 
    } 
} 
})(); 

EDIT: вот скриншот объекта в инструментах dev. объект справа является объектом «vm».

Answer 1

Попробуйте обертывание вашей функции ссылки в $timeout() (декларациях функций могут оставаться вне $timeout()):

function ccirSummaryLink(scope, element /*, attrs*/) { 
    $timeout(function() { 
     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'); 
      }); 
    });