Как вызвать функцию контроллера из шаблона в angularjs

Question

Я создаю html из контроллера и добавляю этот html к включенному html-файлу в виде шаблона. но я не могу вызвать функцию контроллера там, когда я нажимаю на флажок. Я хочу получить все эти значения в этой функции.

Это мой тестовый HTML код: -

<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> 

и это мой контроллер расслоение плотной код: -

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

Answer 1

Вы должны compile вновь созданный HTML так, использовать область действия.

так заменить myEl.append(priceHtml); с myEl.append($compile(priceHtml)($scope));

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

Answer 2

Добавьте $ Скомпилируйте к контроллеру, как этот function TodoCtrl($scope,$window, $compile)

Теперь перед добавлением в HTML строка вызова $ компиляции, так что функции в строке шаблона может быть привязанным к $ scope.

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