Angular 没有模板 controllerAs 的指令绑定

Question

我在使用不带模板的自定义指令（使用服务器生成的 DOM）并将我的视图绑定到控制器时遇到了问题。

这是我的 jsFiddle 示例：

angular.module('myModule', [])
    .directive('myDirective', function(){
     return {
          bindToController: true,
          controller: 'myController',
           controllerAs: 'ctrl',
           scope: {
             text: '@'
           },
         }
    })
    .controller('myController', function($scope){
      this.text = $scope.text
    })
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div data-ng-app="myModule" data-my-directive='' data-text="Hello world!">
  <h1>
    {{ ctrl.text }}
  </h1>
</div>

使用我的指令的字符串模板或模板 url 的相同示例可以工作，但我需要使用服务器 DOM。

有没有人遇到同样的问题并解决了？

此致，

Answer 1

指令将仅编译 template/templateUrl 指令范围内的指令。否则指令的内部内容将获得 html 所在的范围。