Question

尝试在我的Angular应用中使用 gist-embed （https://github.com/blairvanderhoof/gist-embed），但没有运气。

它在我的主页上没有问题（这不是Angular应用程序的一部分）但是当我使用类似的东西时：

<code data-gist-id="<gist-id>"></code>

在应用内它不会显示。控制台中没有消息可以解释原因。

有人可以解释原因并提供解决方案吗？

Answer 1

(function($) {

  $(function() {
    // find all elements containing "data-gist-id" attribute.
    $('[data-gist-id]').each(function() {
      var $elem = $(this),
        id,

lib是以这样的方式编码的，一个人无法在角度中使用它，你必须寻找一个提供适当的jquery插件架构的fork，你可以将它用于一个指令。这个lib不尊重基本的jQuery插件架构

并且不会显示任何错误，因为在您的角应用运行之前，.each可能会执行。

Answer 2

截至6月（版本1.8），gist-embed项目现在是一个jQuery插件。

var $code = $('<code data-gist-id="474f6d7839fccffc4b2a"/>');
$code.appendTo('body').gist();

Answer 3

基本上你必须在dom元素上触发“gist（）”。

试试这个，它对我很有用。

            // register trigger gist on every template include
                $rootScope.$on('$includeContentLoaded', function() {

                    // initialize gist on new elements
                    angular.element(document).ready(function() {
                        if (typeof(angular.element(document).gist) === 'function') {
                            angular.element('[data-gist-id]').gist();
                        }
                    });
                });

我整理了一个希望解决问题的小型图书馆。

检查出来：https://github.com/pasupulaphani/angular-gist-embed

Answer 4

Chekout这个角度模块：https://github.com/kiran3807/another-angular-gist-embed

这允许您以指令的形式包含角项目中的要点，其中一个属性是gist-id：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="path/to/another-angular-gist-embed.js"></script>
<script>
   angular.module('example',['another-angular-gist-embed']);
   angular.module.controller('exampleCtrl',['$scope',function($scope){
       $scope.gistId = 'a85770344febb8e30935';
  }]);
</script>
</head>
</head>
<body ng-app="example">
  <div ng-controller="exampleCtrl">
    <!-- This loads a gist with a specific id-->
    <gist-embed data-gist-id="gistId"></gist-embed>
  </div>
</body>
</html>

声明：我是本单元的作者

Gist-embed与Angular应用程序

4 个答案: