付属のHTMLファイルにAngularJSを追加するには？次のコードを使用することにより

Question

：私は私のインデックスページにjQueryを経由してHTMLファイルを含めています

$(function(){ 
    $("#includedContent").load("extraContent.html"); 
}); 

（上記参照）。私は、W3Schoolsサイトの簡単なAngularJSコードをextraContent.htmlに追加しようとしていますが、動作しません。たとえば...

<div ng-app="myApp" ng-controller="personCtrl"> 

First Name: <input type="text" ng-model="firstName"><br> 
Last Name: <input type="text" ng-model="lastName"><br> 
<br> 
Full Name: {{fullName()}} 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
$scope.fullName = function() { 
    return $scope.firstName + " " + $scope.lastName; 
}; 
}); 

任意のアイデア？潜在的に

Answer 1

からhttps://docs.angularjs.org/guide/bootstrap

このページでは、角度の初期化処理を説明し、どのように必要に応じて手動で角度を初期化することができます。潜在的に

さらに良い - https://docs.angularjs.org/api/ng/directive/ngInclude

フェッチは、コンパイルされ、外部のHTMLフラグメントを含んでいます。

Answer 2

bind-html-compileをお勧めします。 AngularJSが提供する指令。これは、インクルードされたファイルをプレーンhtml/textの代わりに角度コードとして扱います。同じのため 指令の定義は次のとおりです。

(function() { 
'use strict'; 

var module = angular.module('angular-bind-html-compile', []); 

module.directive('bindHtmlCompile', ['$compile', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(function() { 
       return scope.$eval(attrs.bindHtmlCompile); 
      }, function (value) { 
       element.html(value); 
       $compile(element.contents())(scope); 
      }); 
     } 
    }; 
}]); 
}()); 

が同じ詳細はhttps://github.com/incuna/angular-bind-html-compileを参照してください。

Answer 3

サーバーからのデータ読み込み時に応答が必要な場合$ Httpサーバーが必要で、ロード時にget（Or）$ http（）メソッドを使用する必要があります。サーバー経由で実行されます。

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
$http.get("Your File Name.htm") 
.then(function(response) { 
    $scope.myWelcome = response.data; 
}); 
});