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

在这种情况下，{{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();
      });
    }
  }
});

$ compile内部的click handler不进行插值

1 个答案: