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
hoje, com a Alura e o Google Gemini
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!