нг клик не работает с $ интерполировать на объекте

Question

У меня есть шаблон:

var template = '<div ng-click="sayHello()">{{text}}</div>' 

я скомпилировать его с моим объектом с:

var obj = {}; 
obj.text = "Hello!!!"; 
obj.sayHello = function(){alert("hi!");}; 
var angularTemplate = $interpolate(template)(obj); 

я добавить angularTemplate к моему всплывающего окна. всплывающее окно показывает с правильным div, говорящим «Привет !!!» ... но когда я нажимаю на него, ничего не происходит,

Я также попытался снова интерполировать его с помощью моей области действия и поместить функцию в область видимости, но она тоже не работает.

JS FIDDLE (none) Working demo of what im trying

«составлен» \ «интерполированное» HTML затем переданы в библиотеку JQuery, чтобы показать HTML там как всплывающее окно.

Пожалуйста, помогите.

---

После ребят меня спрашиваешь, почему им даже используя интерполяцию я покажу другой путь я быть_наст, и, может быть, Theres простого способа решить мою проблему там:

JSFIDDLE2 - Here is a closer example to the real problem

Answer 1

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

Посмотреть

<say-hello-drv></say-hello-drv> 

Директива

.directive('sayHelloDrv', function() { 
    return { 
    restrict: 'E', 
    template: '<div ng-click="sayHello()">{{text}}</div>', 
    controller: function ($scope) { 
     $scope.text = 'Initial hello'; 
     $scope.sayHello = function() { 
      $scope.text = 'Hello from sayHello()'; 
     } 
    } 
    } 
} 

Ref. https://docs.angularjs.org/guide/directive

Обновления для случая использования, который КСТАТИ я заменил бы получить вашу директиву HTML разметки шаблона свойство DDO:

var myApp = angular.module('myApp',[]) 

function MyCtrl($scope, $interpolate, $compile) { 

    console.log($scope) 

     var template = '<eventPopup ng-click="sayHello()">{{text}}</eventPopup>'; 
    var objList = [{text: "Hello1"}, {text: "Hello2"}]; 

    $scope.sayHello = function() { 
     alert('hello') 
    } 

    for (i = 0; i < objList.length; i++) { 
     var angularTemplate = $interpolate(template)(objList[i]); 
     var interpolatedTemple = $('#abc' + i).html($compile(angularTemplate)($scope)); 
    }  
} 

myApp.controller('MyCtrl', MyCtrl)