Использовать объект из директивы внутри дочерней директивы

Question

У меня есть две директивы. Внешние директивы должны получить некоторую информацию от службы, а затем использовать этот объект для внутренней директивы. Но я не могу понять, как это сделать правильно. Вот некоторые примеры кода, в котором я полагаю, у меня есть некоторые цветные карандаши, и мы должны получить информацию карандаш на основе ID, чтобы выяснить цвет карандаша:

<div pencil-directive pencil-id="7"></div> 

---

angular.module('app', []) 

.controller('sampleController', function($scope){ 
    $scope.color = "red"; 
}) 

.directive('colorDirective', function(){ 
    return { 
    restrict: "E", 
    template: "<span ng-class='color'>{{color}}</span>", 
    scope: { 
     color: '=' 
    } 
    } 
}) 

.directive('pencilDirective', ["$timeout", function($timeout){ 
    return{ 
    restrict: "A", 
    template: "<div>Pencil {{pencilId}} is " + 
     "<color-directive color='pencil-color'> </div>", 
    scope: { 
     pencilId: "@", 
     pencilColor: "=?" 
    }, 
    controller: function($scope){ 
     //simulate getting the pencil color from a service 
     $timeout(function(){ 
     $scope.pencilColor = "blue"; 
     }, 10) 

    } 
    } 
}]) 

Я хотел бы ожидать что выглядеть следующим образом:

Pencil 7 color is blue. 

Но вместо этого она заканчивается просто глядя, как это:

Pencil 7 color is 0 

Я предполагаю, потому что pencilColor не инициализируется к тому моменту, когда colorDirective видит его, и он не обновляется позже, но я не знаю «угловой способ» этой работы.

Here's a plunk. Обратите внимание, что я нахожусь на Angular 1.2, так как мы все еще поддерживаем IE 8 (пока).

Answer 1

Ваша проблема связана с вашей привязкой между вашей родительской директивой и дочерним элементом.

Ваше использование scope.pencilColour, но передающее его в вашу дочернюю директиву с pencil-color.

При использовании свойств и атрибутов области для ваших директив вам требуется тире. Однако при использовании их для привязки в вашем шаблоне. Либо с {{}}, либо передавая их в атрибуты подзаголовки, вам не нужна тире и может использовать свойство scope, как определено.

Меняем <color-directive color='pencil-color'> </div> к <color-directive color='pencilColor'> </div>

См шлепнуть: http://plnkr.co/edit/mVCKLWgknwg81SUkIRtf?p=preview

---

EDIT: не слишком уверен, что если ив объяснил, что очень хорошо, может быть, это поможет.

<!--Here we need the dash as were referencing it as a html attribute--> 

<div pencil-directive pencil-color="'green'"></div> 

<!--However in the directives template when we bind we use it as defined on our scope--> 

{{pencilColor}} 

<!--Even when passing it into a sub directive. The sub directives attribute needs the dash but our current one doesn't.--> 

<sub-directive sub-prop="pencilColor" /> 

---