Bom dia!
Eu tentei seguir a documentação do AngularJs, que está igual ao que o curso nos ensinou, e ainda assim não consegui fazer funcionar.
Segue o meu código:
<!-- src/directive/ss-panel.html -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">{{title}}</h1>
</div>
<div class="panel-body" ng-transclude>
</div>
</div>// src/directive/ss-panel.js
angular.module('customDirectives', []).directive('ssPanel', function() {
return {
restict: 'E',
templateUrl: 'directive/ss-panel.html',
// template: '<div class="panel panel-default"><div class="panel-heading"><h1 class="panel-title">{{title}}</h1>' +
// '</div><div class="panel-body" ng-transclude></div></div>',
transclude: true,
scope: {
title: '@'
}
};
});// src/main.js
var app = angular.module('Funcionarios', ['ngRoute', 'ngResource', 'services', 'customDirectives']);
// ... rotas<!-- src/index.html -->
<!doctype html>
<html lang="en" ng-app="Funcionarios">
<head>
<meta charset="UTF-8">
<title>Bem-vindo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<header>
<img src="img/logo.png">
<hr>
</header>
<div>
<!-- mudará de acordo com a rota -->
<ng-view></ng-view>
</div>
<footer>
<hr>
<p>Copyright 2014</p>
</footer>
<script src="vendor/angular.min.js"></script>
<script src="vendor/angular-route.min.js"></script>
<script src="vendor/angular-resource.min.js"></script>
<script src="directive/ss-panel.js"></script>
<script src="service/services.js"></script>
<script src="main.js"></script>
<script src="controller/funcionarios-controller.js"></script>
<script src="controller/bem-vindo-controller.js"></script>
</body>
</html><!-- src/partials/bem-vindo.tpl.html -->
<ss-panel title="Bem-vindo">
<a ng-href="#/funcionarios">
Acessar lista de funcionários
</a>
<p ng-repeat="funcionario in funcionarios">
{{funcionario.nome}}
</p>
</ss-panel>Segue o print de como ficou: https://imageshack.com/i/eyuVUiBip
