Question

考虑以下示例，其中一个元素静态包含在指令定义中，另一个元素稍后添加（使用jQuery）：

＆＃13;

angular.module('test', []).directive('transcludeThis', [function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div id="transcluded" data-ng-transclude></div>'
    };
}]);

$(function() {
  angular.bootstrap(document, ['test']);
  $('#transcluded').append('<div>Dynamic (jQuery): </div>').find('*').each(function() {
      var $this = $(this);
      $this.append(angular.element($this).scope().$id);
  });
});

＆＃13;

<transclude-this>
  <div>Static: </div>
</transclude-this>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.10/angular.js"></script>

＆＃13;

为什么动态元素不在转换范围内？

Answer 1

因为在创建指令的范围时，该动态元素不存在。如果使用angular，则应在指令内创建动态元素，然后维护范围。

为什么指令下的动态元素在转换后添加时会有错误的范围？

1 个答案: