javascript - 没有模板 Controller 的 Angular 指令绑定(bind)

Question

在使用没有模板的自定义指令(使用服务器生成的 DOM)并将我的 View 绑定(bind)到 Controller 时，我遇到了问题。

这是我的 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 所在的范围。