Question

我有一个angularjs应用程序，我需要根据控制器从服务获取的数据更新一些元标记（用于fb共享）。

现在，当控制器从服务中获取数据时，我在ItemController中执行类似的操作：

angular.element('head').find('#metaFbImage').attr('content', $scope.item.imageUrl);

这真的很糟糕，我想在指令中这样做。但我无法找到一个很好的方法来做到这一点。到目前为止，我有两种选择：

1）头标签上的指令。当ItemController从服务获取数据时，我想在指令中调用一个更改元标记的函数。控制器如何从不同的范围调用函数（在ItemController之外）？

2）注入ItemController的服务，该服务更改元标记。这是一个稍好（可行）的解决方案。但是在这样的情况下，是否可以在服务中使用DOM元素？

编辑：所以我选择将其重构为在控制器中使用$ rootScope，并在头部指令中观察$ rootScope。我觉得这是在可接受和不良做法之间。有任何想法吗？

Answer 1

使用这种方法。

使用如下参数创建服务（工厂） `

angular.module("myApp").factory("OGFactory", function(){  
    var OGFactory = {  
        title : "",  
        description : "",  
        ...  
    };  
    return OGFactory;
});

将ng-app元素上的<html>设置为<html ng-app="your_app_name">，以便<head>块可以访问ng-app中的项目。

将OGFactory注入您的Controller。同时将其注入$run块并将其设置为$rootScope $rootScope.OGFactory = OGFactory。

在您的控制器完成所需操作后（如果有任何异步），请设置OGFactory.title和OGFactory.description。

在<head>部分中，添加元标记，例如：<meta name="og:title" content="{{OGFactory.title}}">

控制器将设置OGFactory属性，rootScope将反映它们。

但请注意，Facebook不会等待Javascript完成处理以获取页面结果，因此您的{{title}}看起来就像（字面意思）＆＃34; {{TITLE}}＆＃34;除非你使用像prerender.io这样的服务。这种方法适用于预呈现。

使用来自不同范围的控制器的数据来操纵元标记

1 个答案: