Моя директива не обнаружена Angular

Question

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

Вот разметка:

<div ng-app="main"> 
    <div ng-controller="mainCtrl"> 
    {{ message }} 
    <actionBar></actionBar> 
    </div> 
</div> 

Вот код:

angular.module('main', []) 
    .controller('mainCtrl', function ($scope) { 
    $scope.message = "Hello."; 
    $scope.doStuff = function (cb) { 
     alert('Doing stuff...'); 
     cb(); 
    }; 
    }) 
    .directive('actionBar', function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     template: '<h1>test</h1>', 
     scope: { 
     doStuff: '&' 
     }, 
     link: function (scope, element, attrs) { 
     alert('test'); 
     scope.doStuff(function() { 
      alert('callback executed'); 
     }); 
     } 
    }; 
    }); 

Вот такой codepen:

http://codepen.io/Chevex/pen/hteBE/

{{ message }} заполнитель правильно заменяется "Привет." но тег <actionBar> заканчивается в браузере, и функция ссылки директивы никогда не запускается.

Answer 1

В HTML вы должны ссылаться на директиву с:

<action-bar> ... </action-bar> 

вместо

<actionBar> ... </actionBar>