$编译内部的点击处理程序不插入

Question

我试图设置一个指令，当它的关联元素被点击时，$编译一段HTML代码并将结果添加为点击元素的子元素。

这里是我的JS：

var app = angular.module('plunker', []); 

    app.controller('MainCtrl', function($scope) { 
     $scope.name = 'World'; 
    }) 
    .directive('compileTest', function($compile) { 
     return { 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
      var content = $compile('<div>Hello {{name}}</div>')(scope); 
      element.append(content); 
      }); 
     } 
     } 
    }); 

在这种情况下，{{名}}是不是永远插值。但是，如果我移除click监听器并在调用链接时立即执行$ compile（）和append（），则插值将起作用。我误解了什么？我想上述应该工作。

这里的普拉克：http://plnkr.co/edit/YEGCq6

谢谢！

Answer 1

您需要致电scope.$apply()，事件不是从角度转发的，因此不在角度生命周期中转发。 $apply将更新范围并调用更改侦听器。
这工作

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}) 
.directive('compileTest', function($compile) { 
    return { 
    link: function(scope, element, attrs) { 
     element.on('click', function() { 
     var content = $compile('<div>Hello {{name}}</div>')(scope); 
     element.append(content); 
     scope.$apply(); 
     }); 
    } 
    } 
});