Угловая Директива - Scope возвращает 0 вместо значения

Question

я следующую угловую директиву:

var OrgChartDirective = function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      source  : '=', 
      container : '=', 
      stack  : '=', 
      depth  : '=', 
      interactive: '=', 
      showLevels : '=', 
      clicked : '=' // We use '=' here rather than '&' for this callback function 
     }, 
     link: function(scope, element, attrs) { 
      var target = $(element); 
      var source = $('#' + scope.source); 
      var options = { 
       container : target, 
       nodeClicked: scope.clicked, 
       stack  : scope.stack, 
       depth  : scope.depth, 
       interactive: scope.interactive, 
       showLevels : scope.showLevels 
      }; 
      console.log("Drawing org chart at " + scope.source + " on " + target); 
      console.log(scope); 
      source.orgChart(options); 
     } 
    } 
}; 

добавить его на страницу как:

<org-chart source='list-for-wf'/> или <div org-chart source='list-for-wf'> </div>

Проблема, на мой консоль, я вижу:

Drawing org chart at 0 on [object Object]

Почему источник возвращает 0, это похоже на jquery, когда вы пытаетесь получить доступ к недопустимому элементу. Даже если я зарегистрирую source в качестве первой линии функции связи, это 0

Почему это? Я пробовал data-source="..." и всевозможные вещи. Есть идеи?

Answer 1

Атрибуты считываются как выражения яваскрипта, поэтому source="list-for-wf" интерпретируется как «переменной list минус ключевое слово for минус переменной wf». (Я немного удивлен Угловая не выдаст ошибку по этому ключевому слову, а не возвращаться к нулю, но эй.)

Я думаю, что вы хотите строку в кавычках вместо: <org-chart source="'list-for-wf'">