Uso do scope para Directives no AngularJS | AngularJS: crie webapps poderosas

3
respostas

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Minimizando a complexidade do nosso HTML e atividade Colocando em prática

por Cristofer Sousa

| 29.1k xp | 9 posts

Front-end Developer

angular.module('minhasDiretivas', [])
.directive('meuPainel', function() {

  //ddo  direction object
  var ddo = {};
  // ae = atribut element
  ddo.restrict = "AE";
  //para capturar dados da diretiva usamos a propriedade scope
  ddo.scope = {
    titulo: '@xpto'
  }
  ddo.transclude = true;
  ddo.templateUrl = 'js/directives/meu-painel.html';

  return ddo;
});

 <meu-painel 
                ng-repeat="foto in fotos"
                xpto="{{foto.titulo}}">
                    <img 
                        class="img-responsive center-block" 
                        src="{{foto.url}}" 
                        alt="{{foto.titulo}}">
            </meu-painel>

Flávio,

Boa noite no caso, eu não saquei muito bem o exercicio 5, eu entendi que devemos adotar @ sempre que for atribuir e se for um nome de propriedade diferente do que esperamos devemos colocar o @nomeDaPropriedade e lá em nossa diretiva atribuir o nomeDaPropriedade={{foto.titulo}}. Eu fui fazer uma simulação para trocar o termo do scope e ver como funciona mas não surtiu efeito, poderia me informar onde estou errando?

Abraços

3 respostas

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

24/05/2018

Bom dia, o código que você colou é seu teste? Qual opção você marcou no exercício 5 quando foi tentar resolvê-lo?

por Cristofer Sousa

| 29.1k xp | 9 posts

Front-end Developer

24/05/2018

Boa noite, achei que havia ficado claro, o código acima é de um exemplo que estou fazendo na baseado na sua aula, o exercício em questão é o número 05, eu acertei ele é @nome-completo, porém eu gostaria de simular a troca do nome do valor da propriedade igual foi informado no exercício e não obtive o mesmo resultado.

No caso aqui, suponho que lá na minha view o nome que estarei fazendo a "conexão" entre view e controller, é {{titulo }} , então eu posso usar o @ pois é a mesma propriedade.

 ddo.scope = {
    titulo: '@'
  }

Mas e se eu quiser usar por exemplo xpto?

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

Meu component na view ficaria desta, forma?

<meu-painel 
                ng-repeat="foto in fotos"
                `xpto="{{foto.titulo}}"`>
                    <img 
                        class="img-responsive center-block" 
                        src="{{foto.url}}" 
                       ` alt="{{foto.xpto}}"`>
            </meu-painel>

Abraços

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

25/05/2018

Eu pedi mais informações porque o código que você postou funciona perfeitamente. Cheguei a copiar e a colar sua diretiva no meu arquivo de diretivas e funcionou como esperado.

angular.module('minhasDiretivas', [])
    .directive('meuPainel', function () {

        //ddo  direction object
        var ddo = {};
        // ae = atribut element
        ddo.restrict = "AE";
        //para capturar dados da diretiva usamos a propriedade scope
        ddo.scope = {
            titulo: '@xpto'
        }
        ddo.transclude = true;
        ddo.templateUrl = 'js/directives/meu-painel.html';

        return ddo;
    });

Esse aqui é o index.html no qual realizei o teste:

<!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 class="col-md-2" ng-repeat="foto in fotos" xpto="{{foto.titulo}}">
                   <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>
            </div><!-- fim row -->
        </div> <!-- fim container -->        
    </body>
</html>

Você alterou versão do Angular, qual navegador esta testando? Eu testei no Chrome 66 e no Firefox 59.