ng-click 不适用于对象上的 $interpolate

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 说 "Hello!!!" ...但是当我点击它时没有任何反应，

我也尝试用我的范围再次插入它并将函数放在范围中，但它也不起作用。

JS FIDDLE (none) Working demo of what im trying

然后 "compiled"\"interpolated" html 被传输到 jquery 库以在那里显示 html 作为弹出窗口。

请帮忙。

在你们问我为什么我什至使用插值之后，我会展示我的另一种方法，也许那里有更简单的方法来解决我的问题：

JSFIDDLE2 - Here is a closer example to the real problem

Answer 1

不是将字符串分配给变量并插入更多 angularjs 方法是创建一个指令，这样您将获得一个范围以及显示视图所需的一切。

查看

<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()';
         }
     }
  }
}

参考。 https://docs.angularjs.org/guide/directive

更新您的用例，顺便说一句，我将用 DDO 的模板属性替换您的指令 HTML 标记：

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)

ng-click 不适用于对象上的 $interpolate

ng-click not working with $interpolate on an object

angularjs

angularjs-interpolate