angularjs get template and pass variable to template

Question

<section ng-app="app" ng-controller="ctrl">   
    <div id="output">{{ foo }}</div>
    <button ng-click="myFun()">Click me</button>
</section>

var app = angular.module("app", []);
app.controller('ctrl', function($scope, $http){
    $scope.bar = 123;
    $scope.myFun = function(){
        $http.get('template.html').then(function(response){
            $scope.foo = response.data;
        }); 
    };  
});

//template

<h1>{{ bar }}</h1>

I'm new in angularjs

I try to create a ng-click and get a template data into page like ajax

I try to use variable inside of template

anyone know how to pass variable to template in angularjs?

Maher · Accepted Answer · 2016-10-09 06:31:55Z

1

I find another way to solve your question, i hope this sample helps you

 <html ng-app="app" ng-controller="ctrl">
 <head>
<title>sample</title>
</head>
<body>
<div ng-include="template"></div>
<button ng-click="myFun()">Click me</button>

<script src="angular.js"></script>
<script type="text/javascript">
    var app = angular.module("app", []);
    app.controller("ctrl",
        function ($scope) {
            $scope.bar = 123;

            $scope.myFun = function () {
                $scope.template = "temp.html";
            };
        });
</script>

Template

<h1>{{ bar }}</h1>

answered Oct 9, 2016 at 6:31

Maher

2,5471 gold badge21 silver badges33 bronze badges

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

2 Comments

Benjamin W Over a year ago

can you please explain why? and what if I want to append data, not replace

Maher Over a year ago

because in angular we use [directives, services, factories and filter] to handle this situations. please read more about [ngInclude] i'm sure you can find the answer to complete your project. in angular you don't need to handle your codes as jQuery. NOTE: you can use nested ngInclude too.

Collectives™ on Stack Overflow

angularjs get template and pass variable to template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related