ajax load（）関数の後のAngularJSバインドスコープhtmlへ

これについて読んだあと、ajaxを通して読み込まれたhtmlは私の角型アプリケーションにバインドされていないことを理解しています。私は1.000ものを試しましたが、角度を理解するために 'customers-invoice.html'を得ることはできません。どんなアイデアも高く評価されます。あなたは、この場合にng-includeディレクティブを使用することができajax load（）関数の後のAngularJSバインドスコープhtmlへ

<body ng-cloak ng-app="myApp"> 
    <main id="main"> 
     <div ng-controller='Ctrl'> 
      <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a> 
     </div> 
    </div> 
</body> 


var app = angular.module('myApp', []); 
app.controller('Ctrl', function($scope, $compile) { 
    $scope.invoice = {} 
    $scope.openInvoice = function(ref) { 
     $scope.invoice.ref = ref; 
     var html = $('#main'); 
     html.load('customers-invoice.html') 
     $compile(html)($scope);   
    } 
}

出典

2017-09-13 ClaraG

、それはあなたのための準備ができてコンパイルDOMバインディングとDOMを指定したことで、負荷のhtmlを行います。あなたはCtrlコントローラのバインディングを取得したいので、しかし、あなたはDOMそれCtrlコントローラ内部でdiv

<body ng-cloak ng-app="myApp"> 
    <main id="main"> 
     <div ng-controller='Ctrl'> 
      <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a> 
      <div ng-include="templateUrl"></div> 
     </div> 

    </div> 
</body>

コード

$scope.openInvoice = function(ref) { 
    $scope.invoice.ref = ref; 
    $scope.templateUrl = 'customers-invoice.html';  
}

出典

2017-09-13 13:05:52

私は最終的に角度の独自の方法を使用しているので、この解決方法を選択しました。おかげで – ClaraG

はあなたがHTMLをロードするために$templateCacheサービスを使用できることを配置する必要がありますテンプレートが既にキャッシュにロードされているため、ファイルをコントローラに追加する必要があります。

var app = angular.module('myApp', []); 
app.controller('Ctrl', function($scope, $compile, $templateRequest, $sce) { 
    $scope.invoice = {} 
    $scope.openInvoice = function(ref) { 
     var templateUrl = $sce.getTrustedResourceUrl('customers-invoice.html'); 

     $templateRequest(templateUrl).then(function(template) { 
      $compile($("#main").html(template).contents())($scope); 
     }); 
    } 
})

出典

2017-09-13 13:07:48

おかげで、まだ変更されたスコープをレンダリングしない – ClaraG

jqueryのlibを追加することを確認してください。 https://plnkr.co/edit/bpBXDi7PC7gYBOgz3h0Y?p=preview –

はい！ありがとう – ClaraG

Iveは最終的に問題を解決し、それに応じて解決しました。 Angularの知識の外でコードを実行しているので、挿入されたhtmlをコンパイルしてAngularを表示し、手動で$ scope。$ digest（）を呼び出してマークアップを更新する必要があります。

だから、これは単なるトリックん：

$コンパイル（$スコープ）;（$（ '＃のidWhereIloadedContentを'）の内容（）。）

$ scope。$ digest（）;

出典

2017-12-20 12:02:44 ClaraG

ajax load（）関数の後のAngularJSバインドスコープhtmlへ

答えて

関連する問題