Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
estou fazendo para praticar o mesmo que esta sendo explicado no alurapic só que num site pessoal porem as angular expressions não são apresentadas na views no vindo do meu escopo isolado . como posso resolver isso ? segue link do projeto no git . o arquivo da view é o index e os restantes estão na pasta JS https://github.com/rogeriorioli/rogerio-angualr
Olá, não se preocupe. Zilhões de alunos já passaram por isso sem problema.
Please, cole a mensagem de erro que é exibida no console do seu Chrome, inclusive o código envolvido no processo aqui no Fórum.
Onde estou, não consigo acessar o link do seu repo.
Outra coisa, deixe bem claro se é um código novo que você elaborou ou se é o código do treinamento :)
ok . realmente eu fiz um outro Codigo! não apresenta erro no console ele só não traz para a view o titulo , status e fields . a imgem ele traz perfeitamente .
<--!-codigo da view --->
aqui tem uma referencia doque quero fazer - porem eu fiz sem usar diretiva. a parte que quero fazer com diretiva e a parte do meu portifolio . http://rogerioorioli.com
obrigado
Oi Carlos, ficou confuso porque você não usou a formatação especial. No quadro do post, há uma caixinha chamada formatação que explica qual caracter especial você tem que usar . É importante você dominar isso, porque muitas pessoas que querem lhe ajudar acabam desistindo porque o código fica ilegível. É até uma boa hora para aprender como se faz e ficar fera aqui no Alura.
Aguardo seu código formatado :)
"
ÒK vamos la - codigo da view :
<meu-jobs ng-repeat="projeto in projetos.projects">
<img class="img-responsive center-block" src="{{projeto.covers.original}}" alt="{projeto.name}}" />
</meu-jobs>
codigo da diretiva:
angular.module('minhasDiretivas',[])
.directive('meuJobs', function(){
var ddo = {};
ddo.restrict ="AE";
ddo.scope = {
name: '@',
url: '@',
fields: '@',
views:'@'
};
ddo.templateUrl ='js/diretivas/meujobs.html';
ddo.transclude = true;
return ddo;
});codigo do controller
angular.module('rogerio').controller('SiteController', function($scope, $http){
$scope.projetos = [];
var url = 'https://www.behance.net/v2/users/rogeriorioli/projects?callback=JSON_CALLBACK&client_id=LrwiVZx8aYG8eUikSWO1n3s5pZ70SpAp'
$http({
method: 'JSONP',
url: url
}).success(function(portifolio){
$scope.projetos = portifolio;
console.log(portifolio);
})
.error(function(erro){
console.log(erro);
});
$scope.bio =[];
$scope.bio = { titulo : 'Um Pouco Sobre Mim',
sobre : 'Sou Paulistano, Designer Gráfico e Desenvolvedor Front-End, Eterno Estudante, tenho 34 anos, trabalho como web designer desde 2007 e apaixonado pela propaganda.',
sobreMin: 'Gosto muito de desenvolver para Front-End e criação por isso que tenho um perfil híbrido de Design + programação.',
url : 'sobre.html',
image : 'img/rogerio.png',
imageSobre : 'img/rogerio2.png',
perfil : 'Sou criativo , gosto de criar , desenvolver e pensar em novas soluções que gerem resultados e melhoram as vidas das pessoas. Tenho um perfil híbrido, conhecimentos em design e programação com isso consigo participar de todo o processo criativo e funcional da solução que será feita em por mim ou em equipe .Procuro sempre seguir uma Carreira Y Gosto Muito de pesquisar novas tendências e aplicá-las em novos projetos e ou aprimorá-las em projetos recorrentes .Sonho em ter um aplicativo meu bombando nos smartphones das pessoas . Apaixonado pela Gastronomia, teatro, cinema , Muita música e tecnologia . Aproveito esse espaço para declarar publicamente meu amor à Publicidade e pela Propaganda.'
};
});codigo do template URL
<div class="col-md-4 fix-top2 animated slideInUp" ng-transclude >
<h3 class="text-center" name="{{projeto.name}}">{{projeto.name}}</h3>
<p class="text-center"><i class="fa fa-eye"></i> Visualizações: {{projeto.stats.views}}</p>
<p class="text-center">
<span class="label label-primary">{{projeto.fields[0]}}</span>
<span class="label label-success">{{projeto.fields[1]}}</span>
<span class="label label-info">{{projeto.fields[2]}}</span>
</p>
<a href="{{projeto.url}}" target="_blank">
<button type="button" class="btn btn-default btn-lg center-block">
Ver Projeto
</button>
</a>
</div>codigo do main
angular.module('rogerio', ['minhasDiretivas']);o caso é que so mostra as imagens e não vem o titulo , os views e os fields . de resto funciona tudo.
esse é o link que esta funcionando porem sem a diretiva. se quizer pegar como base de entendimento. http://www.rogerioorioli.com
Olá Carlos, dei uma olhada, mas tem um monte de coisa que não existi. Na sua diretiva, você está acessando direto um controller. Vejamos:
{{projeto.fields[0]}}Diretiva é criada justamente para desacoplar de um controller, e pelo o que eu entendi, você eta acessando a propriedade projeto disponibilizada por um controller qualquer. Como sua diretiva tem escopo privado, ela não encontrará essa propriedade.
Um outro ponto que não vi no código é onde você está usando a diretiva meusJobs. Em nenhum lugar a diretiva é usada no exemplo que você me passou.
Então, primeiro, vamos alinhar aqui as ideias:
1 - Diretivas não podem acessar dados externos a ela, você precisa passar esses dados como parâmetro para a diretiva quando ela for usada. É o caso do seu projeto. Se você quer que sua diretiva trabalhe com a referência de um objeto, você tem que receber esse parâmetro enviado por um controller usando o modificador =.
2 - Para saber se a sua diretiva realmente funciona, você precisa ter alguma parcial que a utilize, e o seu exemplo não possui (talvez tenha esquecido).
3 - Para um design supimpa de uma diretiva, você tem que pensar primeiro o que ela precisa receber para funcionar. Vi que você fez isso, perfeito, com os parâmetros name, url, fields e view, Mas sua diretiva faz uso de um tal de project, logo ele reveria receber essa info também.
Pegou a ideia?
eu não entendi isso ! :
"Se você quer que sua diretiva trabalhe com a referência de um objeto, você tem que receber esse parâmetro enviado por um controller usando o modificador =."
os dados da diretiva ta aparecendo na minha view . só não aparece os dados de view e name , fields e url . a imagem que esta dentro da marcação <meu-jobs>aparece as outras angular expression que estão no template não.
no caso terei que colocar dentro da minha diretiva um objeto projects e dentro desse objeto os parâmetros name, url, fields e view para que minha diretiva consiga receber essa referencia ?
acho que to começando a entender . mudei o arquivo da minha directiva emcima doque eu entendi.
angular.module('minhasDiretivas',[])
.directive('meuJobs', function(){
return {
scope: {
name: '=',
url: '=',
fields: '=',
views:'='
},
controller: 'js/controller/SiteController',
templateUrl:'js/diretivas/meujobs.html',
transclude: true
}
});agora ele me dá o seguinte erro , porem todos os dados do template vieram na view \o/
Error: [ng:areq] http://errors.angularjs.org/1.5.0-rc.0/ng/areq?p0=js%2Fcontroller%2FSiteController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:6:421
at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:22:41)
at Ta (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:22:128)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:84:42
at B (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:62:118)
at v (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:63:115)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:72:397
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:123:217
at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js:137:446)(anonymous function) @ angular.js:13003(anonymous function) @ angular.js:9732(anonymous function) @ angular.js:15295m.$eval @ angular.js:16554m.$digest @ angular.js:16372m.$apply @ angular.js:16662g @ angular.js:11033t @ angular.js:11231v.onload @ angular.js:11172
%7B%7Bprojeto.covers.original%7D%7D:1 GET http://localhost:7888/rogerio-angualr/%7B%7Bprojeto.covers.original%7D%7D 404 (Not Found)Em nenhum momento do exemplo que você passou eu vi a diretiva sendo usada. Passa um exemplo de você usando a diretiva, blz ? Assim fica melhor para entende-lá.
As alterações com = que você fez (explico isso no treinamento e tem exercício ) é uma relação bi direcional. Isso significa que se vc passar como parâmetro para a diretiva uma propriedade de um controller ela não será uma mera cópia. Se mudar o propriedade no controller a diretiva ficará sabendo e se você mudar a propriedade na diretiva o controllet fica sabendo.
O @ ê usado para vc passar uma string para a diretiva que só terá o primeiro valor naquele momento em que foi passado e nunca mais será atualizado .Se a propriedade muda no controller a diretiva não fica sabendo.
Vi também que usa ngtransclude mas viajei total porque você a esta utilizando. Bem, ela é usada quando você quer que a diretiva quando usada (ainda aguardo o exemplo dela em uso que Vc não enviou) aceite receber elementos filhos. Sem transclusāo, a diretiva quando processada removera qualquer conteúdo dentro da tag da diretiva. Mas sua diretiva tem conteúdo dentro do tag do templateurl que tem ng-transclude!!!
Ahhh agora que eu vi que sua diretiva define o controller. ... foi mal ae
Agora a análise muda de figura!
Não tinha visto também que você também já forneceu o código da diretiva em uso.
Agora vou rever ...
Seu repo está atualizado para eu clonar?
vou atualizar, obrigado
Opa, vamos por partes para você ficar ainda melhor em Angular. O primeiro ponto que quero voltar é o template da diretiva. Lá temos:
<div class="col-md-4 fix-top2 animated slideInUp" ng-transclude >
// omiti o restante do código
</div>Nela, você usou ng-transclude. Essa diretiva é usada quando você quer que a diretiva aceite elementos filhos. Por exemplo:
<meus-jobs><h1>Oi</h1></meus-jobs>Sem o ng-transclude e a propriedade da diretiva scope.transclude = true, o <h1> sumiria. O transclude mantém os elementos filhos. Porém, no seu template da diretiva, você já está colocando um conteúdo, sendo assim, não consigo enxergar a necessidade dessa transclusão. Até aí tudo bem?
Vejamos o código da sua diretiva:
angular.module('minhasDiretivas',[])
.directive('meuJobs', function(){
var ddo = {};
ddo.restrict ="AE";
ddo.scope = {
name: '@',
url: '@',
fields: '@',
views:'@'
};
ddo.templateUrl ='js/diretivas/meujobs.html';
ddo.transclude = true;
return ddo;
});No escopo privado da diretiva, você esta criando name, url, fields e views. Porém, em nenhum lugar do template js/diretivas/meujobs.html você está usando esses valores. Qual sua intenção em passar esses parâmetros?
Outro ponto. No exemplo que você passou aqui da diretiva em uso temos:
<meu-jobs ng-repeat="projeto in projetos.projects"> <img class="img-responsive center-block" src="{{projeto.covers.original}}" alt="{projeto.name}}" />
</meu-jobs>Nela você está passando uma imagem como filha do <meu-jobs> (agora acho que compreendo porque você usou transclusão). Porém, essa <img> deveria estar dentro de meujobs.html e sua diretiva deveria receber como parâmetro o endereço da imagem.
Ainda em sua diretiva em uso, veja que nela você não passou os parâmetros url, fields, views e name. Ou seja, porque dentro da definição da sua diretiva você está recebendo esses parâmetros que sequer são usados?
Aguardo seu feedback para poder ajudá-lo melhor Carlos.
Eu vi a versão desatualizada, vi que agora no template da diretiva você está usando field, views etc sim.
Dê uma olhada nesse link na parte de portifolio tem a imagem e o nome as visualizações e fields e url que esta no button ok! http://rogerioorioli.com quero pegar esses dados e fazer com diretiva porque na pagina de portifolio ele aparecerá novamente.
acho que agora vc irá entender .
obrigado.
Eu vi seu código e no template da sua diretiva você está acessando {{projeto.stats.views}}. Nela, você amarrou sua diretiva com o escopo deu um controller que devem sempre ter a propriedade projeto. Por que você não passa projeto como parâmetro para a diretiva usando o modificador = ?
Não faz sentido amarrar uma diretiva deste jeito, você perde o reuso.
Faça essa alteração primeiro e depois veja o resultado.
E outro ponto: você está usando a versão 1.5 do Angular release candidate!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Cara, jamais faça isso, porque não é a versão final e pode ter bugs. Só para ter ideia, recebi uma mensagem de erro no seu projeto no processo de injeção.
Atualize para a versão mais atual 1.4 final e tente novamente.
Você aprendeu também no treinamento que para usar o sistema de rotas do Angular precisa importar esse módulo e ainda ativá-lo no módulo principal da aplicação. Não tem nada disso no seu projeto!!!!
Você não importou o módulo de rotas (o script) e nem habilitou no seu módulo.
Dá uma olhadinha novamente no capítulo de rotas. Beleza?
angular.module('rogerio', ['minhasDiretivas']);
// onde está o módulo de rotas? Você não importou o módulo!.
Vi também que você nem chegou no capítulo do curso que fala sobre rotas, aliás, nem fez os exercícios. (pelo menos foi o que o sistema me disse, como moderador, se eu estiver errado, me corrija, please).
Tipo, vou deixar esse post aberto e esperar você seguir o fluxo do treinamento até o fim. Não adianta querer atropelar as coisas. Para mim, você já tinha terminado o curso e no mínimo tinha chegado até a aula de rotas.
Faça com calma.
ah blz ! obrigado ate o momento com a atenção , e que to gostando MUITOOOOO do curso .
Mas vc não tinha feito mesmo? Se não fez, faz lá como calma! Daí, a gente fecha essa dúvida. Daí, se ainda você não conseguir resolver, você abre uma nova dúvida e a gente ataca ela! :) Pode ser?
pode ser sim claro !
Tranquilo. Vou fechar esse post como solucionado. Quando terminar o treinamento ou se tiver dúvida nos capítulo que estiver cursando, poste aqui para a gente.
Daí, a gente volta depois na sua dúvida do seu projeto pessoal. Aliás, eu acho que no final você conseguirá resolver sozinho.
Abraço Carlos!