0

我有一个模板：

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（无）我正在尝试的工作演示

然后将“已编译”\“插值”html 传输到 jquery 库以将 html 显示为弹出窗口。

请帮忙。

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

JSFIDDLE2 - 这是一个更接近实际问题的示例

4

1 回答 1

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)
于 2015-12-13T13:16:20.703 回答