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 ではないため、API から返される HTML を制御することはできません。

私がやろうとしていること (これは完全に間違ったアプローチかもしれません) は、「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 にかなり慣れていないので、Angular の他のほとんどのものと同様に、まだ見つけていない非常に簡単な方法があるかもしれません。

実際、最終的な目標は、各節番号を独自のディレクティブに変換して、クリック可能にし、そこに含まれる id 属性にアクセスできるようにして、その情報をユーザー コンテンツとともに独自の API に送信できるようにすることです。

情報量が多い気がするので、不明な点があれば教えてください。私はそれに取り組んでいるので、最初にそれを理解したら、必ず答えを更新します.

進行中

この質問をチェックアウト: https://stackoverflow.com/a/21067137/1507210

今、詩が表示されているセクションをディレクティブに変換してから、検索コントローラーにサーバーからの HTML をスコープ変数に入力させ、それをテンプレートとして使用する方が理にかなっているのだろうかと思っています。ディレクティブについて...考える 考える 考える

4

2 に答える 2

1

おそらく私がここに投稿したものの中で最も賢明ではありませんが、それはかなりクールなコードです。これを実際に実行することをお勧めするかどうかはわかりませんが、ここにjsfiddleがあります

したがって、私がこれを賢明でないと呼ぶ理由の 1 つは、挿入されたコードが、必要なディレクティブだけでなく、任意のディレクティブを実行するためです。それ以外にも多くのセキュリティリスクが存在する可能性があります。しかし、それは素晴らしく機能します。取得している 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 に答える