This is my code
template.html:-
<div ng-controller="TempCtrl">
<h2>About</h2>
<h3>{{total}}</h3>
<p>Testing the total</p>
<button ng-click="update()">Update</button>
</div>
<script>
console.log("begin")
angular.module("app")
.controller("TempCtrl", function ($scope) {
$scope.total = 0;
console.log("inside")
$scope.update = function () {
total += total;
};
});
console.log("end")
</script><!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="container body-content">
<div class="dynamic-content" >No data Yet
<!-- Loading content Here -->
</div>
<button ng-click="loadTemplate()">Load Template</button>
</div>
<script>
var app = angular.module('app', []);
app.config(
function( $controllerProvider, $provide, $compileProvider ) {
app.controller = function( name, constructor ) {
$controllerProvider.register( name, constructor );
return( this );
};
}
);
app.controller('AppCtrl', function ($scope) {
$scope.show=false;
$scope.someData = {};
$scope.loadTemplate = function() {
$scope.show=true;
var container = $('.dynamic-content');
container.html('<div ng-controller="TempCtrl"> <h2>About</h2> <h3>{{total}}</h3> <p>Testing the total</p> <button ng-click="update()">Update</button> </div> <script> console.log("begin"); console.log(app.controller); app.controller("TempCtrl", function ($scope) { $scope.total = 0; console.log("inside"); $scope.update = function () { $scope.total = $scope.total + 1; }; }); console.log("end") <\/script>');
var newScope = angular.element(container).scope();
var compile = angular.element(container).injector().get('$compile');
compile($(container).contents())(newScope);
}
});
</script>
</body>
</html>In the above code was working fine but using Jquery. i am getting template.html source from web api services . when i click button (loadtemplate) that time i want to show the template.html source. In that template.html file contains angular scripting also. i am trying to use ng-include directive but that was not working because that html file contains angular script. Now how to load that html file using Angularjs or javascript only not using Jquery.
