How to add AngularJS in included HTML file?

Question

By using following code:

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

I am including an HTML file via jQuery into my index page (see above). I am trying to add simple AngularJS code from the W3Schools site into the extraContent.html, but it's not working. For example...

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

Any ideas?

sorry to ask once again ,i mean you are trying to call the html file using another html — user6458249
– user6458249, Commented Aug 9, 2016 at 8:53

Mars Robertson · Accepted Answer · 2016-08-09 08:53:22Z

1

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

This page explains the Angular initialization process and how you can manually initialize Angular if necessary.

Potentially even better - https://docs.angularjs.org/api/ng/directive/ngInclude

Fetches, compiles and includes an external HTML fragment.

answered Aug 9, 2016 at 8:53

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal · Accepted Answer · 2016-08-09 09:01:38Z

I would recommend bind-html-compile. Its a directive provided by AngularJS. It treats the included file as angular code instead of plain html/text. Directive definition for the same is:

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

Refer https://github.com/incuna/angular-bind-html-compile for more info on the same.

Samudrala Ramu · Accepted Answer · 2016-08-09 09:07:54Z

0

When The Data Load From Server Then It Will Give A response You Must Need An $Http server And Use get (Or) $http() Method On load Time .It Will Run Through Server.

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

answered Aug 9, 2016 at 9:07

Samudrala Ramu

2,1061 gold badge17 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to add AngularJS in included HTML file?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related