Simplify повторен сфера атрибуты angularjs

Question

я обнаружил, повторяя следующую структуру слишком часто, и я хотел бы, чтобы упростить:

<container> 
    <clock property="data"></clock> 
    <calendar property="data"></calendar> 
    <alert property="data"></alert> 
</container> 

С относительной директивы

app.directive('clock', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     'property': '=' 
    } 
    } 
}); 

Как удалось удалить property = "data" из каждого элемента и переместить его в конечном итоге на уровне контейнера?

Answer 1

Вы можете установить property="data" в родительской директивы и сделать его доступным через контроллер

Ваша директива контейнер

<container property="data"> 

app.directive('container', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     'property': '=' 
    }, 
    controller: function($scope){ 
     this.getData = function(){ 
     return $scope.property; 
     } 
    } 
    } 
}); 

И ваша директива ребенок

<clock></clock>  

app.directive('clock', function(){ 
    return { 
    restrict: 'E', 
    require: '^container', 
    link: function(scope, elm, attrs, containerCtrl) { 
     console.log(containerCtrl.getData()); 
    }   
    } 
}); 

require родителем директиву и назвать это связанный метод containerCtrl.getData(), чтобы получить требуемое значение.

Проверить Demo