Criar um link com AngularJS

Front-end
#1

Pessoal, estou com uma dúvida, quero fazer um link para redirecionar para outra página qualquer, ex: https://www.youtube.com/ , como eu faria isso?

Arquivo filmes.controller

angular.module(“Filmes”).controller(“FilmesController”, function($scope){
$scope.titulo = “Eventos disponiveis”;

$scope.filmes = [
	{
		id: "1",
		titulo: "BGS 2019",
		ano: "09/08/2019 - 13/08/2019",
		produtora: "Expo Center Norte, São Paulo",
		sinopse: "A maior feira de games da América Latina está com recorde de atrações! Jogue os lançamentos. Vem jogar com a gente. Tipos: Centenas de atrações, Mais de 300 expositores, Mais de 200 lançamentos, Convidados internacionais, Muita diversão.",
		cartaz: "bgs.jpg"
		url: "https://www.google.com/search?q=como+fazer+link+com+angular&rlz=1C1SQJL_pt-BRBR822BR822&oq=como+fazer+link+com+angular&aqs=chrome..69i57j33.7159j0j7&sourceid=chrome&ie=UTF-8"
	},
	{
		id: "2",
		titulo: "Olimpiadas 2020",
		ano: "24/07/2020 - 9/08/2020",
		produtora: "Tóquio, Japão",
		sinopse: "Jogos Olímpicos de Verão de 2020, conhecidos oficialmente como os Jogos da XXXII Olimpíada, mais comumente Tóquio 2020, será um evento multiesportivo realizado no segundo semestre de 2020, na região metropolitana de Tóquio, Japão. Wikipédia",
		cartaz: "Olimp2020.jpg"
	},
	{
		id: "2",
		titulo: "Copa do mundo 2022",
		ano: "21/11/2022 - 18/12/2022",
		produtora: "Catar",
		sinopse: "A Copa do Mundo FIFA de 2022 ou Campeonato Mundial de Futebol FIFA de 2022 será a vigésima segunda edição deste evento esportivo, um torneio internacional de futebol masculino organizado pela Federação Internacional de Futebol, que ocorrerá no Catar. Wikipédia",
		cartaz: "Copa2022.png"
	},
	{
		id: "2",
		titulo: "Apalestra",
		ano: "09/10/2019",
		produtora: "Centro de eventos do Ceará",
		sinopse: "O filósofo, escritor e professor Mário Sérgio Cortella é o próximo convidado do Fórum Ideias em Debate, promovido pela Federação das Indústrias do Estado do Ceará (FIEC).",
		cartaz: "palest.jpg"
	}
];

Tentei colocar uma url ali mas não deu certo.

Arquivo index.html

{{ titulo }}

	<div class="lista-filmes">
		<div class="filme com-cartaz" ng-repeat="filme in filmes">
			<h1>{{ filme.titulo }}</h1>
			
			<img ng-src="{{ filme.cartaz }}" alt="Cartaz de {{ filme.titulo }}" height="200px">
			<ul><a ng-hre="/{{filme.url}}"><button>Obter Ingresso</button></a>
				<li><strong>Data:</strong> {{ filme.ano }}</li>
				<li><strong>Local:</strong> {{ filme.produtora }}</li>
			</ul>
			<p>{{ filme.sinopse }}</p>
		</div>	
	</div>
#2

Você usou ng-hre na tag <a>, quando na verdade o correto é ng-href

#3

sim, sim. Eu notei o problema, mas ainda continua não funcionando

#4

Você tentou tirar a / no começo do link? não faz muito sentido ter ela ali. Basicamente mudar isso:

<a ng-href="/{{filme.url}}">

para isso

<a ng-href="{{filme.url}}">

E você não pode colocar um <button> dentro de um <a>, isso vai contra a especificação do HTML5 como você pode ver aqui:

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

#5

ok, o código está assim agora:

{{ titulo }}

	<div class="lista-filmes">
		<div class="filme com-cartaz" ng-repeat="filme in filmes">
			<h1>{{ filme.titulo }}</h1>
			
			<img ng-src="{{ filme.cartaz }}" alt="Cartaz de {{ filme.titulo }}" height="200px">
			<ul>
				<li><strong>Data:</strong> {{ filme.ano }}</li>
				<li><strong>Local:</strong> {{ filme.produtora }}</li>
			</ul>
			<p>{{ filme.sinopse }}</p>
			<button><a href="{{ filme.url }}" target="_blank">Obter Ingresso</a></button>
		</div>	
	</div>

E no arquivo do js

angular.module(“Filmes”).controller(“FilmesController”, function($scope){
$scope.titulo = “Eventos Recomendados”;

$scope.filmes = [
	{
		id: "1",
		titulo: "BGS 2019",
		ano: "09/08/2019 - 13/08/2019",
		produtora: "Expo Center Norte, São Paulo",
		sinopse: "A maior feira de games da América Latina está com recorde de atrações! Jogue os lançamentos. Vem jogar com a gente. Tipos: Centenas de atrações, Mais de 300 expositores, Mais de 200 lançamentos, Convidados internacionais, Muita diversão.",
		cartaz: "bgs.jpg"
		url: 'https://www.youtube.com/'
	},
	{
		id: "2",
		titulo: "Olimpiadas 2020",
		ano: "24/07/2020 - 9/08/2020",
		produtora: "Tóquio, Japão",
		sinopse: "Jogos Olímpicos de Verão de 2020, conhecidos oficialmente como os Jogos da XXXII Olimpíada, mais comumente Tóquio 2020, será um evento multiesportivo realizado no segundo semestre de 2020, na região metropolitana de Tóquio, Japão. Wikipédia",
		cartaz: "Olimp2020.jpg"
		url: 'https://www.youtube.com/'
	},
	{
		id: "2",
		titulo: "Copa do mundo 2022",
		ano: "21/11/2022 - 18/12/2022",
		produtora: "Catar",
		sinopse: "A Copa do Mundo FIFA de 2022 ou Campeonato Mundial de Futebol FIFA de 2022 será a vigésima segunda edição deste evento esportivo, um torneio internacional de futebol masculino organizado pela Federação Internacional de Futebol, que ocorrerá no Catar. Wikipédia",
		cartaz: "Copa2022.png"
		url: 'https://www.youtube.com/'
	},
	{
		id: "2",
		titulo: "Palestra",
		ano: "09/10/2019",
		produtora: "Centro de eventos do Ceará",
		sinopse: "O filósofo, escritor e professor Mário Sérgio Cortella é o próximo convidado do Fórum Ideias em Debate, promovido pela Federação das Indústrias do Estado do Ceará (FIEC).",
		cartaz: "palest.jpg"
		url: 'https://www.youtube.com/'
	},
	{
		id: "2",
		titulo: "Aviões Fantasy",
		ano: "28/09/2019",
		produtora: "Arena Castelão, Fortaleza, Ceará",
		sinopse: "a maior festa a fantasia do Brasil. Comandada por Xand Avião, todos os anos a festa tem um tema específico e ainda traz um line-up estrelado e este ano não vai ser diferente.",
		cartaz: "Af.jpg"
		url: 'https://www.youtube.com/'
	}
];

});

Coloquei assim só de teste, quando clico no botão ele só recarrega o site e não vai para o link desejado

#6

O mesmo vale pro relacionamento inverso, você não pode colocar um <a> dentro de um <button>, ja tentou fazer um link simples só pra testar se funciona?

#7

sim, tbm não funcionou. Qualquer link ele só recarrega a página, ou seja, ele vai para o próprio index.html - Auto Refresh