打开图在单页应用程序AngularJs中无法正常工作

Question

我使用Angularjs创建了单页应用程序。现在，我需要为主页设置社交媒体共享按钮。我使用了开放图元标记。但是它在标题的位置显示了变量。我在下面附加了我的代码。

var mainbread = angular.module('mainbread', ['ngSanitize', 'ui-notification','ngRoute', 'ngTable','ngStorage', 'angular.filter',
 'moment-picker', 'ngMaterial', '720kb.socialshare','googlechart','md-steppers','djds4rce.angular-socialshare','ngMeta'])

mainbread.config(function (NotificationProvider, $routeProvider, $locationProvider, ngMetaProvider) {
    NotificationProvider.setOptions({
        delay: 5000,
        startTop: 40,
        startRight: 40,
        verticalSpacing: 20,
        horizontalSpacing: 20,
        positionX: 'right',
        positionY: 'top'
    }),       
    $routeProvider
     .when("/", {
         templateUrl : "/home.php",
         controller: "maincontrol"
     })
    .when("/donate", {
        templateUrl : "/donate.php",
        controller: "maincontrol"
    })
    .when("/donate/:raiser", {
        templateUrl : "/donate.html",
        controller: "donatectrl"        
    })  
    .when("/bunch", {
        templateUrl : "/bunch.php",
        controller: "maincontrol"
    })
    .when("/about", {
        templateUrl : "/about.php",
        controller: "maincontrol"        
    })
    .when("/blog", {
        templateUrl : "/blog.php",
        controller: "maincontrol"        
    })
    .when("/contact", {
        templateUrl : "/contact.php",
        controller: "maincontrol"
    })
    .when("/terms", {
        templateUrl : "/terms.php",
        controller: "maincontrol"
    })
    .when("/policy", {
        templateUrl : "/policy.php",
        controller: "maincontrol"
    })
    .when("/login", {
        templateUrl : "/login.html",
        controller: "loginctrl"
    })
    .when("/ngo", {
        templateUrl : "/ngo.html",
        controller: "ngoctrl"
    })
    .when("/logins", {
        templateUrl : "/logins.html",
        controller: "loginctrl"
    });

    $locationProvider.html5Mode(true);
    ngMetaProvider.useTitleSuffix(true);
    ngMetaProvider.setDefaultTitle('adsfasdfasdf');
    ngMetaProvider.setDefaultTitleSuffix(' | asdfad');
    ngMetaProvider.setDefaultTag('author', 'adsfasdf');

}).directive('magnificPopup',
    [
        "$compile", 
        function($compile) {
            return {
                restrict: 'A',
                scope: {},
                link: function($scope, element, attr) {
                    attr.callbacks = {
                        ajaxContentAdded: function() {
                            var content = this.content;

                            var scope =  content.scope();
                            $compile(content)(scope);
                            scope.$digest();
                        }
                    };

                    element.magnificPopup(attr);
                }
            }
        }
    ]
);

angular.module('mainbread').run(function($FB,ngMeta){
  $FB.init('43033453455858', 'fr_IN'); // Country code format example: fr_FR
  ngMeta.init();
});
mainbread.service('MetaService', function() {
       var title = 'Web App';
       var metaDescription = '';
       var metaKeywords = '';
       var metaimage = '';
       return {
          set: function(newTitle, newMetaDescription, newKeywords, newmetaimage) {
              metaKeywords = newKeywords;
              metaDescription = newMetaDescription;
              title = newTitle; 
              Image = newmetaimage; 
          },
          metaTitle: function(){ return title; },
          metaDescription: function() { return metaDescription; },
          metaKeywords: function() { return metaKeywords; },
          metaimage: function() { return metaimage; }
       }
    });

// 'use strict';
mainbread.controller('maincontrol', ['$scope', '$filter', '$http', 'Notification', '$compile', '$window', '$rootScope', '$location', '$mdDialog', '$anchorScroll','MetaService',
    function ($scope, $filter, $http, Notification, $compile, $window, $rootScope, $location, $mdDialog,$anchorScroll, MetaService) {
        $scope.gotoBottom = function ()
        {
            var id = $location.hash();
            $location.hash('gototop');
            $anchorScroll();
            $location.hash(id);
        }
        $rootScope.metaservice = MetaService;
        $rootScope.metaservice.set("title","description","key","images/logo2.png");


    }]);
    mainbread.controller('ngoctrl', ['$scope', '$filter', '$http', 'Notification', '$compile', '$window', '$rootScope', '$location', '$mdDialog', '$anchorScroll','MetaService',
    function ($scope, $filter, $http, Notification, $compile, $window, $rootScope, $location, $mdDialog,$anchorScroll, MetaService) {
        $rootScope.metaservice = MetaService;
       $rootScope.metaservice.set("title","description","key","images/logo2.png");

    }]);
    mainbread.controller('loginctrl', ['$scope', '$filter', '$http', 'Notification', '$compile', '$window', '$rootScope', '$location', '$mdDialog', '$anchorScroll','MetaService',
    function ($scope, $filter, $http, Notification, $compile, $window, $rootScope, $location, $mdDialog,$anchorScroll, MetaService) {
        $rootScope.metaservice = MetaService;
        $rootScope.metaservice.set("title","description","key","images/logo2.png");
    }]);

    mainbread.controller('donatectrl', ['$scope', '$filter', '$http', 'Notification', '$compile', '$window', '$rootScope', '$location', '$mdDialog','$routeParams','NgTableParams','$anchorScroll', 'ngMeta','MetaService',
    function ($scope, $filter, $http, Notification, $compile, $window, $rootScope, $location, $mdDialog, $routeParams, NgTableParams, $anchorScroll,ngMeta, MetaService) {

        $scope.spinner = true;
        $scope.raiser = $routeParams.raiser;        
        $scope.comments;
        $scope.campaign;
        $scope.backers;
        $scope.verified;$scope.needtoraise;
        $scope.coupon = [];
        $scope.meta;
        $scope.gotoBottom = function ()
        {
            var id = $location.hash();
            $location.hash('gototop');
            $anchorScroll();
            $location.hash(id);
        }
        debugger;
        //alert("$scope.raiser");   
        $http({
               method: "GET",
               url: "api link",
               dataType: "json",                 
            }).then(function (response) {
              debugger;
              $scope.comments = response.data.comments ;
              $scope.campaign = response.data.campaigns ;
              $scope.backers = response.data.backers ;
              $scope.usertable = response.data.usertable ;           
              $scope.needtoraise = $scope.campaign.raised > $scope.campaign.target ? '100%' : ($scope.campaign.raised*100)/$scope.campaign.target;
              $scope.verified = angular.equals($scope.campaign.verify,0) ? 'Unverified' : 'Verified';


       $rootScope.metaservice = MetaService;
       $rootScope.metaservice.set("title","description","key","images/logo2.png");

      });

    }]);

这是我的HTML文件

<!DOCTYPE html>
<html lang="en" ng-app="mainbread">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="shortcut icon" href="https://bunchbread.com/images/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title ng-bind="metaservice.metaTitle()"></title>
    <meta name="description" content="{{ metaservice.metaDescription() }}" />
    <meta name="keywords" content="{{ metaservice.metaKeywords() }}" />
    <meta property="og:description" content="{{ metaservice.metaDescription() }}" />
      <meta property="og:title" content="{{metaservice.metaTitle()}}" />
      <meta property="og:image" content="{{ metaservice.metaimage() }}" />
</head>

和示例错误图像

但是这在标题中起作用。但共享时不起作用。帮我这个

Answer 1

动态OG标签是不可能的，Facebook忽略了JavaScript。您必须在服务器上呈现标签或使用类似以下的方式：https://prerender.io/