AngularJS関数からhtmlをどのように返しますか？

私は新しいAngularJSスタイルのコードを作成しています。 AngularJS形式の既存のサイトを再作成しようとしています。AngularJS関数からhtmlをどのように返しますか？

私は最終的に外部ファイルにapp/controllerを作り、コントローラの機能を与える方法を考え出しました。これらの関数は、変数、特に文字列を返して自分の.htmlファイルの情報を埋め込むことができますが、htmlタグを使用すると.htmlのリテラルとして使用されます。

同様の方法でhtmlテンプレートを埋め込む方法を見つけようとしていますが、htmlを使用しています。

他のJSフォーマットでは、ドキュメント/レスポンスに書き込むことができます。または、少なくとも関数が値を返して元のJS/HTML書き込みにhtmlという値を返すようにすることができます。

ここではフッターに似たものを試していますが、Footer（）には2行に表示する必要がある文字列があります。

フォローするサンプルコード（私は重要なビットにそれを編集します）： HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
     <script language="JavaScript" src="./Universal.js" runat="server"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <link href="./Main.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body id="idBody" ng-app="Universal"> 
     <table id="idTableMain"> 
      <tr id="idFooterRow"> 
       <td id="idFooterMain" colspan="3"> 
        <p id="idFooterContent" ng-controller="UniversalController"> 
         {{Footer()}} 
        </p> 
        <p id="idFooterManagement" ng-controller="UniversalController"> 
         {{WebMaster()}} 
        </p> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

アプリケーション/コントローラ：

var Universal = angular.module("Universal", []); 

Universal.controller("UniversalController", ['$scope', function ($scope) 
    { 
     $scope.Footer = function() 
     { 
      $scope.vResult = "© Copyright 2012 All rights reserved<br>";  
      $scope.vResult += "House That Kamurai Built"; 
      return $scope.vResult; 
     }; 

     $scope.WebMaster = function() 
     { 
      $scope.vResult = "Website managed by Kamurai."; 
      return $scope.vResult; 
     }; 
    }]);

出典

2017-09-07 Kamurai

使用ng-bind-htmlページにHTMLを表示するために、その前に$sce.trustAsHtmlメソッドを呼び出してhtmlを信頼できるものにする必要があります。

$scope.Footer = function() { 
    $scope.vResult = "© Copyright 2012 All rights reserved<br>"; 
    $scope.vResult += "House That Kamurai Built"; 
    return $sce.trustAsHtml($scope.vResult); 
};

Htmlの

<p id="idFooterContent" 
    ng-controller="UniversalController" 
    ng-bind-html="Footer()"> 
</p>

Demo

提案：あなたがページ上の二回置く代わりにのテーブルの上に直接ng-controller="UniversalController"を配置している可能性があります。私はあなたが持っていた特別な事件を知らない、そのがそこに導いた。

出典

2017-09-07 16:47:07

私が言ったように、私はまだこれに新しいので、これをゆっくりと歩こうとしています。私はコントローラを1つの要素に置き、それを行い、次に2番目の要素を追加したので、コントローラをどのように統合するかについてはまだ知りませんでした。私は少なくとももう1つのコントローラを最終的に持つつもりですが、重複しないように別の質問を投稿する必要があります。 – Kamurai

ありがとうございますが、私は間違ったことをする必要があります。私はあなたの提案と共に何かを返すことができません。私はそれを調べて、それを働かせることができれば答えとしてマークします。 – Kamurai

@Kamuraiあなたはplunkerデモリンクを見ましたか？もっと良い方法でそれを理解するのに役立つかもしれません –

AngularJS関数からhtmlをどのように返しますか？

答えて

関連する問題