angularjs - $compile 在点击处理程序内部没有插值

Question

我正在尝试设置一个指令，当单击其关联元素时，将 $compile 一段 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);  
          });
        }
      }
    });

在这种情况下，{{name}} 不会被插值。但是，如果我删除点击侦听器并在调用链接时立即执行 $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();
      });
    }
  }
});