4

Como fazer para a descrição, que está em um Array no controller, seja renderizada para a <meta name="description" content="{{metadescription}}"> , que está na index.html, e possa aparecer dinamicamente nas views?

Eu uso $routeParams; quando eu coloco: title: ':pageName' o title é substituido pela rota atual, ao acessar a página. Gostaria de fazer algo parecido com a metadescription , fazendo a descrição que está dentro do Array items no controller NatureCtrl aparecer nas views.

Controller

angular.module('tareasApp')
  .controller('NatureCtrl', function ($scope, $routeParams, $sce, $location, $anchorScroll) { 

    $scope.pageName = $routeParams.pageName;

$scope.items =[
 {    
      href:'/relaxing-sounds-waves', 
      img:'waves.jpg', 
      descricao:'Those Relaxing Sounds of Waves'
 },
 {    
      href:'/relaxing-ocean-sounds', 
      img:'ocean.jpg', 
      descricao:'Nature Sounds Relaxing Ocean Sounds'
 }
];
 });

app.js

    var myApp = angular.module('tareasApp')
      myApp.config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
          .when('/:pageName', {
                    templateUrl: 'views/wizard.html',
                    title: ':pageName',
                    metadescription: 'Aqui precisa ir algo que faça a ligação entre a descricao, que está no controller NatureCtrl, a metadescription que está na index.html e seja dinamicamente inserido nas views',
                    controller: 'NatureCtrl'
                })
                .otherwise({
                  redirectTo: '/'
                });
            });

// Dessa forma consigo obter os títulos das páginas baseado na route e routeParams. Como configurar a $rootScope.metadescription para obter a descrição referente a cada páginas?
myApp.run(['$location', '$rootScope', '$routeParams', function($location, $rootScope, $routeParams) {
   $rootScope.$on('$routeChangeSuccess', function (event, current) {
   var title = current.$$route.title;
if (title && $routeParams){
    for(var PageName in $routeParams) {
        title = title.replace(new RegExp(':' + PageName, 'g'), $routeParams[PageName]);
    }
}
$rootScope.title = title;
$rootScope.metadescription = current.$$route.metadescription;
     });
 }]);

Página index.html

<!DOCTYPE html>
<html lang="pt-BR" ng-app="tareasApp">
<head>
<meta charset="utf-8">
<title ng-bind="title"></title>
<meta name="description" content="{{metadescription}}">
<base href="/">
<meta name="fragment" content="!">
</head>

<body>
   Conteúdo vai aqui.....
</body>
</html>  
5
  • Acredito que você teria que mudar a declaração do seu controller junto à tag html para fazer o bind do metadescription. Chegou a tentar isso?
    – Wakim
    4/05/2015 às 11:20
  • Tentei com $scope.$parent.items só que uso outros ng-repeat na index e está dando conflito.
    – Thiago Jem
    4/05/2015 às 20:06
  • Qual sua intenção com isso? Motores de busca não executam Javascript, logo não verão essa description dinâmica que quer fazer. 5/06/2015 às 21:41
  • Após indexar as páginas e enviar o sitemap no google para desenvolvedores o title e description das páginas únicas estão aparecendo nas pesquisas do Google (Páginas únicas são as principais do menu; nessas eu não uso $routeParams) essa pergunta que fiz se refere a fazer uma configuração para adaptar as páginas dos artigos, que usam $routeParams, a dinamicamente mostrar as descriptions de cada página, ao acessá-la. Os titles das páginas dos artigos, que uso $routeParams, já aparecem, gostaria de adaptar o myApp.run para as descriptions.
    – Thiago Jem
    8/06/2015 às 22:23
  • @DiogoDoreto na verdade, o GoogleBot executa conteúdo javascript antes do parse: rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/…
    – OnoSendai
    1/10/2015 às 17:59

2 Respostas 2

1

Você pode utilizar o módulo Angular-Update-Meta. Com ele, é só você chamar em cada página a tag <update-meta name="description" content="A descrição da nova página aqui"></update-meta>.

Além de que com este módulo, você também consegue atualizar dinamicamente o título, entre outras meta-tags.

-1
<html ng-app="app">
<title ng-bind="metaservice.metaTitle()">Test</title>
<meta name="description" content="{{ metaservice.metaDescription() }}" />
<meta name="keywords" content="{{ metaservice.metaKeywords() }}" />


<script>
var app = angular.module('app',[]);
app.service('MetaService', function() {
   var title = 'Test';
   var metaDescription = '';
   var metaKeywords = '';
   return {
      set: function(newTitle, newMetaDescription, newKeywords) {
          metaKeywords = newKeywords;
          metaDescription = newMetaDescription;
          title = newTitle; 
      },
      metaTitle: function(){ return title; } 
      metaDescription: function() { return metaDescription; },
      metaKeywords: function() { return metaKeywords; }
   }
});

app.controller('myCtrl',function($scope,$rootScope,MetaService){
   $rootSCope.metaservice = MetaService;
   $rootScope.metaservice.set("Test","desc","blah blah");
});
 </script>
 <body ng-controller="myCtrl"></body>


</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .