Question

我有一个AngularJS指令，它在回调click（）函数中调用$ compile。但是，内容似乎没有被编译。

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

testApp.controller('TestController', function($scope) {
  $scope.user_name = 'George';
});    

testApp.directive('testDirective', function($compile) {
  return {
    template: 'Click Here',
    link: function(scope, element, attrs) {

      $(element).click(function() {
        $('#externalDiv2').html('{{user_name}}, you clicked the button.');
        $compile($('#externalDiv2')[0])(scope);
      });
    }
  };
});

在上面的示例中，＃externalDiv2仍会显示＆＃39; {{user_name}}＆＃39;而不是使用范围对象中的用户名进行插值。

我做错了什么？

http://jsfiddle.net/gcmLndzm/3/

Answer 1

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

testApp.controller('TestController', function($scope) {
  $scope.user_name = 'George';
});    

testApp.directive('testDirective', function($compile) {
  return {
    template: 'Click Here',
    link: function(scope, element, attrs) {

      $('#externalDiv1').html('{{user_name}}, the directive has loaded.');
      $compile($('#externalDiv1')[0])(scope);

      $(element).click(function() {
        $('#externalDiv2').html('{{user_name}}, you clicked the button.');
        $compile($('#externalDiv2')[0])(scope);
          scope.$apply();//THIS LINE HAS BEEN ADDED
      });
    }
  };
});

当您使用Click函数时，它是Jquery的一部分，它不会修改绑定，您必须调用一个可以更新绑定的函数。我们用范围做。$ apply OR $ scope。$ apply。

$ compile在回调中不起作用

1 个答案: