$編譯內部的點擊處理程序不插入

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