Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

4. Minimizando a complexidade do nosso HTML

Após encerrar este capitulo incluindo o "meu-painel" passei a ter problemas (tudo funcionava bem até esse capitulo) para exibição da página. No Chrome simplesmente diz que há algo errado ao exibir a página. E no Mozilla diz: Um script desta página pode estar em execução ou parou de responder. Script: http://localhost:3000/js/lib/angular.min.js:74

abaixo a posicao de meus codigos no momento:

index.html

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>

   <body ng-controller="FotosController">
        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <div class="row">
                <meu-painel ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
                    <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>
            </div><!-- fim row -->
        </div><!-- fim container -->
    </body>
</html>

main.js
angular.module('alurapic', ['minhasDiretivas']);

fotos-controller.js
angular.module('alurapic').controller('FotosController', function($scope, $http){

    $scope.fotos = [];

    //http produz requisicoes ajax - get para receber  - post para enviar - delete para apagar
    $http.get('v1/fotos')
    .success(function(fotos){
        $scope.fotos = fotos;
    })
    .error(function(erro){
        console.log(erro);
    })


    /*var promise = $http.get('v1/fotos');

    promise.then(function(retorno){
        $scope.fotos = retorno.data;
    }).catch(function(error){
        console.log(error);
    });*/
});

minhas-diretivas.js

angular.module('minhasDiretivas', [])
.directive('meuPainel', function(){
    var ddo = {};
    ddo.restrict = "AE";//Pode ser usada como Atributo ou como Elemento

    ddo.transclude = true;

    ddo.scope = {
        titulo: '@'
    };

    ddo.templateUrl = 'js/diretivas/meu-painel.html';

    return ddo;
});
;

meu-painel.html
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude></div>
</div>
2 respostas

Boa tarde Jaqueline,

Creio eu que você utilizou errado o link da url para o template.

ddo.templateUrl = 'js/diretivas/meu-painel.html';

O certo é:

ddo.templateUrl = 'js/directives/meu-painel.html';

Troque somente essa linha, creio eu que esse pode ter sido seu erro.

Atenciosamente,

solução!

É isso mesmo que o Gleidson Ferreira postou, você escreveu a palavra directives errada. Faça essa alteração e tudo vai funcionar.