$compile 在点击处理程序内部没有插值答案

【问题标题】：$compile inside of click handler not interpolating$compile 在点击处理程序内部没有插值
【发布时间】：2013-06-09 09:45:48
【问题描述】：

我正在尝试设置一个指令，当单击其关联元素时，将 $compile 一个 HTML 的 sn-p 并将结果添加为单击元素的子元素。

这是我的 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

谢谢！

【问题讨论】：

如果您只想要数据绑定，而不想要链接指令，请使用 $interpolate 服务。它可以在没有 $apply 语句的情况下工作。文档：docs.angularjs.org/api/ng.$interpolate

标签： angularjs

【解决方案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();
      });
    }
  }
});

【讨论】：

Arg...dad-gum $apply。谢谢！我应该知道的。