Wie fügt man AngularJS in die enthaltene HTML-Datei ein? folgenden Code

Question

Durch die Verwendung von:

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

Ich bin auch eine HTML-Datei über jQuery in meinen Index-Seite (siehe oben). Ich versuche, einfachen AngularJS-Code von der W3Schools-Seite in die extraContent.html hinzuzufügen, aber es funktioniert nicht. Zum Beispiel ...

<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; 
}; 
}); 

Irgendwelche Ideen?

Answer 1

Potenziell - https://docs.angularjs.org/guide/bootstrap

Diese Seite erklärt die Angular Initialisierung und wie Sie manuell Angular ggf. initialisieren.

Potentiell noch besser - https://docs.angularjs.org/api/ng/directive/ngInclude

Fetches, kompiliert und ein externes HTML-Fragment.

Answer 2

Ich würde empfehlen bind-html-compile. Es ist eine Direktive von AngularJS. Es behandelt die enthaltene Datei als eckigen Code anstelle von einfachem HTML/Text. Richtlinie Definition für das gleiche ist:

(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 auf demselben für weitere Informationen siehe.

Answer 3

Wenn die Daten vom Server laden, dann wird es eine Antwort geben Sie müssen einen $ Http-Server benötigen und verwenden Get (Or) $ http() Methode Bei Ladezeit .Es wird Server ausgeführt.

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