将控制器添加到元素指令答案

【问题标题】：Adding a controller to an element directive将控制器添加到元素指令
【发布时间】：2014-04-07 18:11:09
【问题描述】：

将控制器添加到元素指令时，例如：

.directive('hello', function() {

   return {     
     restrict: 'E',
     replace: true,
     transclude: true,
     template: '<div class="hello" ng-transclude></div>'
   };

});

我无法访问控制器的范围：

.controller('HelloCtrl', function($scope) {  
  $scope.hello = "Hello World";
});


<hello ng-controller="HelloCtrl">
  <h1>Hello Directive</h1>

  <p>{{ hello }}</p>
</hello>

在这种情况下，{{ hello }} 未定义。该指令不会创建子范围或孤立范围。我还尝试使用{{ $parent.hello }} 访问该属性。

这里发生了什么？

我创建了一个 CodePen 来演示这种行为：http://codepen.io/jviotti/pen/ktpbE

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

根据文档...

transclude 使带有此选项的指令的内容可以访问指令外部而不是内部的范围。

因此，您需要将 ng-controller="HelloCtrl" 声明移动到范围更高的元素。

这里是你的 CodePen 修复 http://codepen.io/anon/pen/BjKHG

【讨论】：

有没有其他方法可以在不将控制器放在范围内更高的元素中完成此操作？
您可以使用控制器属性在指令定义中分配控制器