0

所以我可以访问我正在访问的 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 填充到绑定 html 的底部 div 中，然后以某种方式调用 $compile 以将“v”类 sup 转换为我可以修改的指令。再说一次，我对 Angular 还是很陌生，所以可能有一种超级简单的方法可以像 Anguler 中的大多数其他东西一样，我还没有找到。

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

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

进行中

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

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

4

2 回答 2

1

可能是我在这里发布的最不明智的事情，但它是非常酷的代码。我不知道我是否建议实际运行它，但这是一个jsfiddle

所以我称之为不明智的原因之一是因为注入的代码将运行您拥有的任何指令，而不仅仅是您想要的指令。除此之外，还可能存在许多其他安全风险。但它非常有效。如果你信任你正在检索的 HTML，那么就去做吧。

查看其余代码的小提琴：

function unwiseCompile($compile) {
    return function (scope, element, attrs) {
        var compileWatch = scope.$watch(
          function (scope) { return scope.$eval(attrs.unwiseCompile); },
          function (unwise) {
            element.html(unwise);
            $compile(element.contents())(scope);
            // for better performance, compile once then un-watch
            if (scope.onlyOnce) {
                // un-watch
                compileWatch();
            }
          });
    };
}
于 2014-11-08T03:28:04.020 回答
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);
        }
    };
}]);

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

这是一个小提琴。（打开控制台查看已注销的经文编号。）

于 2014-11-08T00:30:14.853 回答