javascript - AngularJS : Compile directives inside HTML returned by an API

Question

因此，我可以访问我正在使用的 REST API，它返回以下预生成的 HTML:

<p class="p">
    <sup id="John.3.16" class="v">16</sup>
    <span class="wj">“For </span>
    <span class="wj">God so loved </span>
    <span class="wj">the world,</span>
    <span class="wj">that he gave his only Son, that whoever believes in him should not </span>
    <span class="wj">perish but have eternal life.</span>
</p>

这对我学习 AngularJS 提出了一个有趣的新挑战。我无法控制从 API 返回的 HTML，因为它不是我构建的 API。

我想做的(这可能是完全错误的方法)是在“v”类上构建一个类指令，以便我可以向诗句编号添加 ng-click 属性并传递诗句信息到我的应用程序的另一部分。

下面是我目前拥有的代码，它似乎没有做任何事情，尽管我认为它会做任何事情。

var app = angular.module('ProjectTimothy');

app.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    }
}]);

app.controller("timothy.ctrl.search", ['$scope', '$http', function($scope, $http){
    $scope.url = "http://apiendpoint.com/";
    $scope.copyright = "";

    $scope.search = function() {
        // Make the request to the API for the verse that was entered
        // Had to modify some defaults in $http to get post to work with JSON data
        // but this part is working well now
        $http.post($scope.url, { "query" : $scope.searchwords, "version": "eng-ESV"})
        .success(function(data, status) {
            // For now I'm just grabbing parts of the object that I know exists
            $scope.copyright = data.response.search.result.passages[0].copyright;
            $scope.result = data.response.search.result.passages[0].text; 
        })
        .error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;         
        });

    };
}]);

app.directive("v", ['$compile', function($compile) {
    return {
        restrict: 'C',
        transclude: true,
        link: function(scope, element, attrs) {
            element.html("<ng-transclude></ng-transclude>").show();
            $compile(element.contents())(scope);
        },
        scope: { id:'@' },
        /*template: "<ng-transclude></ng-transclude>",*/
        replace: false
    };
}]);

使用 API 返回的 HTML 填充的 HTML 模板:

<div class="bible_verse_search_container" ng-controller="timothy.ctrl.search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Bible Verse To Read (i.e. John 11:35)" ng-model="searchwords">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="search()">Search</button>
        </span>
    </div>
    <div class="well" ng-show="copyright" ng-bind-html="copyright | sanitize"></div>
    <div ng-bind-html="result | sanitize"></div>
</div>

所以我希望发生的情况是，HTML 被填充到绑定(bind) html 的底部 div 中，然后以某种方式调用 $compile 将“v”类 super 转换为我可以修改的指令。再说一遍，我对 Angular 还很陌生，所以可能有一种 super 简单的方法可以像 Anguler 中的大多数其他功能一样实现这一点，但我还没有找到。

实际上，最终目标是将每个诗节编号转换为自己的指令，以便能够使其可点击并访问它具有的 id 属性，以便我可以将该信息与一些用户内容发送回我的自己的API。

这感觉像是很多信息，所以如果有任何不清楚的地方请告诉我。我会努力解决这个问题，所以如果我先弄清楚，我一定会更新答案。

进行中

查看了这个问题:https://stackoverflow.com/a/21067137/1507210

现在我想知道尝试将显示诗句的部分转换为指令，然后使搜索 Controller 使用服务器中的 HTML 填充范围变量，然后使用它是否更有意义作为指令的模板...思考思考

Answer 1

我认为你的第二种方法——将显示诗句的部分转换为指令——将是一个很好的方法。

你可以替换这个:

<div ng-bind-html="result | sanitize"></div>

使用这样的指令:

<verse-display verse-html="{{result}}"></verse-display>

指令定义如下所示:

app.directive('verseDisplay', ['$compile', function($compile) {

    function handleClickOnVerse(e) {
        var verseNumber = e.target.id;

        // do what you want with the verse number here
    }

    return {
        restrict: 'E',
        scope: {
            verseHtml: '@'
        },
        replace: true,
        transclude: false,
        template: '<div ng-bind-html="verseHtml | sanitize"></div>',
        link: function(scope, element, attrs) {
            $compile(element.contents())(scope);
            element.on('click', '.v', handleClickOnVerse);
        }
    };
}]);

因此您可以将自己的点击处理程序应用于该元素。

这是一个fiddle 。 (打开控制台可以看到被注销的诗句编号。)