Angularjs 访问指令'；从被转移的元素中删除控制器

我有以下场景：一个具有独立作用域的transclude指令，其中连接了一个控制器：

angular.module('app', [])
.directive('hello', function() {

   return {  

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

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

});

angular.module（'app'，[]）
.directive（'hello'，function（）{
返回{
控制器：功能（$scope）{
$scope.hello=“hello World”；
},
限制：'E'，
替换：正确，
是的，
模板：“”，
作用域：{}
};
});

我期待着从转置元素访问指令的控制器：

<hello>
  <h1>Hello Directive</h1>

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

你好指令
{{你好}}

然而，这似乎是不可能的。我尝试使用

$parent

和

$$nextSibling

访问

hello

这种情况有什么解决方案吗？我无法将控制器放在指令实例的包装器中

---

我创建了一个代码笔来演示这种行为：

您需要将变量作为绑定传递到hello指令中，并将其作为隔离范围的一部分包括在内：

更多信息请点击此处：

编辑：

在最初的示例中，模板在父根作用域中需要{{hello}}变量，但实际上它在hello指令作用域中。事实上，指令中的空隔离作用域意味着它不会从其父级获取任何作用域变量。因此，上面的更改所做的是将（不存在的）hello变量从根范围路由到指令中，然后设置值

---

为了进一步说明这一点，您可以看一下：-您将看到控制器正在设置

$rootScope.hello

，它也可以工作。虽然不建议这样做，因为在不同的控制器上依赖rootScope变量可能会变得混乱。

在非工作示例中，模板要求{{hello}}变量在父根范围内，但它实际上是在hello指令范围内。上的文章帮助我理解了它为何以这种方式工作。您的示例代码很难理解，因为您使用“hello”作为四个不同变量的名称，这些变量之间有着微妙的相互关联。。。