Инициализировать контроллер после добавления DOM в html с помощью jquery

Question

Я использую jquery для добавления html в DOM. Этот html содержит угловой синтаксис, который имеет контроллер и переменную привязку. Но как только html добавляется, переменные, инициализированные внутри контроллера, не заполняют их значения, а печатаются как {{ greeting }}.

JS:

$("#clickDiv").click(function(){ 
    var htmlStr = "<div ng-app='myapp'>"+ 
     "<div ng-controller='mainController'>"+ 
      "<div>{{ greeting.text }}</div>"+ 
      "<div>{{ val }}</div>"+ 
     "</div>"+ 
    "</div>"; 
    $("#right").html($compile(htmlStr)); 

}); 

var app = angular.module("myapp", []); 
app.controller('mainController', ['$scope', '$compile', function($scope, $compile) { 
    $scope.greeting = { text: 'Hello' }; 
    $scope.val = 123; 
}]); 

В приведенном выше коде я получаю ошибку - $compile is not defined.

JSFIDDLE: http://jsfiddle.net/ashwyn/7v6t6cqm/

Answer 1

Для загрузки лениво углового приложения, которое вы должны angular.bootstrap вместо ng-app

$("#clickDiv").click(function(){ 
    var htmlStr = "<div id='myApp'>"+ 
     "<div ng-controller='mainController'>"+ 
      "<div>{{ greeting.text }}</div>"+ 
      "<div>{{ val }}</div>"+ 
     "</div>"+ 
    "</div>"; 
    $('#right').html(htmlStr) 
    angular.bootstrap($('#myApp'), ['myapp']) 
}); 

Посмотрите на this answer тоже дадите вам краткое представление об этом.

Fiddle