Включить элемент HTML/CSS в повторно используемую директиву AngularJS?

У меня есть веб-интерфейс HTML на основе HTML для панели администрирования.Включить элемент HTML/CSS в повторно используемую директиву AngularJS?

Я пытаюсь взять все компоненты HTML и превратить их в повторно используемые директивы AngularJS, чтобы я мог встраивать их в страницу с минимальными усилиями.

Вот один я застрял на:

<section class="dash-tile"> 
    <div class="tile-title" ng-controller="testCtrl">{{test}}</div> 
    <div class="tile-stats"><b>8068</b> 
    </div> 
    <div class="progress progress-xs mt5 mb10"> 
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
     </div> 
    </div> 
    <div class="tile-footer"> 
     Based on new sales 
    </div> 
</section>

Этот фрагмент кода, используемый внутри моего .html GUI создаст небольшую коробчатые название с некоторыми данными внутри.

Может ли кто-нибудь дать мне пример того, как превратить это в компонент многократного использования?

До сих пор я здесь:

admin.directive('whiteBox', function() { 
    return { 
    restrict: 'EA', //restrict the directive to ONLY an attribute or element 
     replace: true, 
    transclude: true, 
    template: '<section class="dash-tile">' + 
            '<div class="tile-title" ng-controller="testCtrl">' + '{{test}}' + '</div>' 
            + '<div class="tile-stats">' + '<b>' + '8068' + '</b>' 
            + '</div>' 
            + '<div class="progress progress-xs mt5 mb10">' 
             + '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">' 
            + '</div>' 
            + '</div>' 
            + '<div class="tile-footer">' 
            + 'Based on new sales' 
            + '</div>' 
           + '</section> ', 
     link: function (scope, element, attrs) { 
       // add events 
     } 
    };

Но это ломает приложение по некоторым причинам.

источник

2014-12-15 Andrew

Определение "ломает приложение для какой-то причине". –

Нет консольных ошибок, все в порядке. Но директива не загружается на экран. – Andrew

Ну, если это ваша полная директива, вам не хватает закрывающей фигурной скобки, скобок и точки с запятой. Кажется, что он работает отлично, кроме этого [см. JsBin] (http://jsbin.com/nazepobito/1/edit?html,js,output) – Tom

AngularJS использует следующую Конвенцию

Если вы назвали вашу директиву whiteBox, в HTML вы используете его white-box.

AngularJS декларации

app.directive('myDirective', function() {

HTML Использование

<div my-directive></div>

источник

2014-12-15 19:11:05

Включить элемент HTML/CSS в повторно используемую директиву AngularJS?

ответ

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