Объект, переданный в директиву Angularjs, не определен

Я слежу за документами и читаю другие вопросы о SO, но я полностью озадачен. У меня есть приложение AngularJS 1.3.14. Я использую ng-route с синтаксисом controller-as, чтобы перейти на мою страницу. У меня большая страница, которая отлично работает. Тем не менее, я пытаюсь создать директиву, и я не могу заставить объект JS правильно переходить в директиву.Объект, переданный в директиву Angularjs, не определен

Это HTML:

<timechart itemsToPlot="memberData.data.adcs" title="Tares" xprop="time" yprop="tare"></timechart>

Переменная memberData мой controller-as имя. Вложенный объект memberData.data.adcs используется чуть выше этой строки для построения таблицы, и если я вставляю {{ memberData.data.adcs }} в HTML-страницу, он распечатывает объект JS, поэтому я знаю, что там есть данные.

Это директива:

myModule.directive('timechart', function() { 
    var linker = function(scope, element, attrs) { 
     var xprop = attrs['xprop']; 
     var yprop = attrs['yprop']; 
     var title = attrs['title']; 
     console.log(typeof itemsToPlot); 
     console.log(typeof scope.itemsToPlot); 
     // blah blah blah elided 
    }; 
    return { 
     restrict: 'EA', 
     scope: { 
      itemsToPlot: '=', 
      title: '@', 
      xprop: '@', 
      yprop: '@' 
     }, 
     link: linker 
    }; 
});

Когда я поставил точку останова сразу же после console.log() заявления, я вижу, что xplot, yplot и название все доступны, либо через attrs массив (как показано в код) или в объекте области. Однако переменная itemsToPlot всегда не определена. В объекте области видимости есть переменная itemsToPlot, но она всегда не определена.

Я пробовал пятнадцать способов формирования области, называя атрибуты, пытаясь заставить эту переменную заполнять. Я посмотрел на все вопросы о SO, и кажется, что я делаю это правильно. Я надеюсь, что кто-то здесь увидит мою ошибку!

источник

2016-04-05 Ken DeLong

Скорее всего, переменная действительно установлена, но не сразу. Итак, что вам нужно сделать, это добавить часы в свою область действия.

myModule.directive('timechart', function() { 
    var linker = function(scope, element, attrs) { 
     var xprop = scope.xprop; 
     var yprop = scope.yprop; 
     var title = scope.title 
     var itemsToPlot = scope.itemsToPlot 

     scope.$watch('itemsToPlot', function(newVal){ 
      itemsToPlot = newVal; 
      // Just as a proof of concept: 
      if(typeof itemsToPlot !== 'undefined') console.log(itemsToPlot); 
     }); 
    }; 
    return { 
     restrict: 'EA', 
     scope: { 
      itemsToPlot: '=', 
      title: '@', 
      xprop: '@', 
      yprop: '@' 
     }, 
     link: linker 
    }; 
});

источник

2016-04-05 16:41:46 chrisboustead

Спасибо, что это было! Код выше все еще не работал, хотя у других были подобные проблемы [здесь] (http://stackoverflow.com/questions/13980896/watching-for-data-changes-in-an-angular-directive) и [здесь] (http://stackoverflow.com/questions/18139375/scope-watch-in-a-directive-isnt-being-called-after-ajax-request). Мне нужно подняться на один уровень и перейти в 'memberData.data' вместо' memberData.data.adcs'. Но, наконец, это сработало! –

Отлично! не зная структуры данных, которые было бы трудно определить, чтобы передать родительский объект, но рад, что это привело вас к решению – chrisboustead

изменения в вашем HTML itemsToPlot по items-to-plot

<timechart items-to-plot="memberData.data.adcs" title="Tares" xprop="time" yprop="tare"></timechart>

источник

2016-04-05 16:55:41

Объект, переданный в директиву Angularjs, не определен

ответ

Смежные вопросы