Как установить динамический метаданные в угловых JS Firebase 3.0 (с Firebase хостинг-сервер)

Question

Я пытаюсь установить метаданные из Firebase ответа, но не отображается при совместном использовании с социальными медиа

index.html Код

<title>{{metatags.title}}</title> 
<meta property="og:description" content="{{metatags.description}}"> 
<meta property="og:image" content="{{metatags.keywords}}"> 

app.js

var app = angular.module("sampleApp", ["firebase","ngRoute","metatags"]). 


config(function ($routeProvider) { 
firebase.initializeApp(config); 
    $routeProvider.when('/b/healthcare', { 
     templateUrl : './views/clinic.html', 
     controller : 'SampleCtrl' 
    }) 
    .when('/b/venues', { 
     templateUrl : './views/venues.html', 
     controller : 'SampleCtrl' 
    }) 
.when('/', { 
     templateUrl : './views/venues.html', 
     controller : 'SampleCtrl' 
    }) 
    }); 

app.run(function(MetaTags){ 
    MetaTags.initialize(); 
}); 

controller.js

app.controller("SampleCtrl", ["$scope", "$firebaseObject", "$firebaseArray", "$routeParams","$rootScope", 
    function($scope, $firebaseObject, $firebaseArray, $routeParams,$rootScope) { 

$rootScope.metatags = { 
    title : "loading", 
    description: "aaa", 
    keywords:"business,bla2" 
    } 

    var ref = firebase.database().ref(); 

    $scope.datadetails = $firebaseObject(ref.child('metatag').child('venue').child('object2')); 

    $scope.datadetails.$loaded().then(function(){ 

    $rootScope.metatags = { 
     title : $scope.datadetails.title, 
     description:$scope.datadetails.description, 
     keywords:$scope.datadetails.image 
    } 
    }); 
} 

]); 

, но когда я пытаюсь поделиться с WhatsApp это дать мне выход, как показано ниже изображения

(ПРИМЕЧАНИЕ: Я использую Firebase хостинг)

Answer 1

Вы разворачивания обещание , что означает, что Angular больше не знает об изменениях, внесенных вами в $rootScope:

$scope.datadetails.$loaded().then(function(){ 
    $rootScope.metatags = { 
     title : $scope.datadetails.title, 
     description:$scope.datadetails.description, 
     keywords:$scope.datadetails.image 
    } 
}); 

Лучший способ для решения этой проблемы является не разворачивать обещание и просто привязать его к $rootScope тоже:

$rootScope = $scope.datadetails; 

С этой структурой, Угловое будет автоматически получать уведомления, когда данные считываются из базы данных Firebase и всякий раз, когда он обновляется.

Если это как-то не представляется возможным (я не знаком с тонкостями $rootScope.metatags) вы можете альтернативно сказать ANGULAR себя, что есть изменения требуется для отображения:

$scope.datadetails.$loaded().then(function(){ 
    $timeout(function() { 
    $rootScope.metatags = { 
     title : $scope.datadetails.title, 
     description:$scope.datadetails.description, 
     keywords:$scope.datadetails.image 
    }; 
    }); 
}); 

Обратите внимание, что я рекомендую первый подход, поскольку второй будет работать только тогда, когда данные изначально загружаются, а не когда они будут обновляться впоследствии.

Более простой (и лучше) способ реализации последнего, чтобы не использовать AngularFire для него и просто слушать метод JavaScript SDK on непосредственно:

var obj = ref.child('metatag').child('venue').child('object2'); 
obj.on('value', function(snapshot) { 
    $timeout(function() { 
    var datadetails = snapshot.val(); 
    $rootScope.metatags = { 
     title : datadetails.title, 
     description:datadetails.description, 
     keywords:datadetails.image 
    } 
    }); 
}); 

Это, по существу, что AngularFire-х $firebaseObject делает под hood: он прослушивает изменения данных с помощью прослушивателя , а затем всякий раз, когда данные изменяются, он сообщает AngularFire, что ему необходимо обновить HTML.