how to call controller function from template in angularjs

Question

I am creating an html from controller and appending this html to included html file in template view. but I am unable to call controller function from there when i am clicking on checkbox. I want to get all those values in that function.

This is my test html code:-

<div ng-app> 
<div ng-controller="TodoCtrl">
  <div id="priceappend"></div> <!-- This div I am using in included html say test1.html -->
  <!-- I cannot iterate array over here, As I am appending priceHtml into test1.html which I am including using ng-include -->
</div>
</div>

and this is my controller js code:-

function TodoCtrl($scope,$window) {

$scope.pricerangelist = {
                            chkbox1:{selected:false,id:'below100',minvalue:'0',maxvalue:'100'},
                            chkbox2:{selected:false,id:'below400',minvalue:'100',maxvalue:'400'},

                            };   

var priceHtml = '';
 priceHtml +='<div class="ui-checkbox ui-checkbox-row"><label for="below100" class="ui-btn ui-corner-all ui-btn-d ui-btn-icon-left">100 and below</label><input type="checkbox"  min_value="0" max_value="100" value="100 US$ and below" class="range myinput large custom" ng-change="pricelistAction(pricerangelist)"  ng-model="pricerangelist.chkbox1.selected"  name="range[]" id="below100"></div>'; 

 priceHtml += '<div class="ui-checkbox ui-checkbox-row"><label for="below400" class="ui-btn ui-corner-all ui-btn-d ui-btn-icon-left">101 and 400</label><input type="checkbox"  min_value="101" max_value="400"  value="101 US$ and 400 US$" class="range myinput large custom" ng-change="pricelistAction(pricerangelist)"  ng-model="pricerangelist.chkbox2.selected"  name="range[]" id="below400"></div>';

 var myEl = angular.element( document.querySelector( '#priceappend' ) );
 myEl.append(priceHtml);


$scope.pricelistAction = function(val){
            console.log(val);
    //this function is not calling.
    };

}

here is the plnkr

Moid · Accepted Answer · 2016-03-11 08:41:20Z

1

You need to compile the newly created HTML so as to use scope.

so replace myEl.append(priceHtml); with myEl.append($compile(priceHtml)($scope));

http://jsfiddle.net/U3pVM/23071/

answered Mar 11, 2016 at 8:41

Moid

1,4471 gold badge13 silver badges25 bronze badges

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

Comments

RT28 · Accepted Answer · 2016-03-11 08:51:22Z

0

Add $complie to your controller like this function TodoCtrl($scope,$window, $compile)

Now before appending the html string call $compile, so that the functions in the template string can be bound to $scope.

myEl.append($compile(priceHtml)($scope))

answered Mar 11, 2016 at 8:51

RT28

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

how to call controller function from template in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related