AngularJS：指令中的隔离范围与指令中的编译

Question

我正在努力从我在指令的编译函数中构建的一些 html 访问隔离范围。我有一个简单的例子，我正在使用的例子要复杂得多。本质上，我无法访问隔离范围内的属性。这是代码。

http://plnkr.co/edit/ETIRs4j3EwZ4DFN5XkPc?p=preview

这对我来说很奇怪，因为在控制台中，从 post 函数来看，范围看起来很棒。

注意 html 是如何在 compile 函数中设置的： tElement.append(angular.element('<div>{{name}}</div><span>{{value}}</span><span>Hello</span>'))

还要注意第二个指令，这里有一个继承的范围，一切正常。

编辑：我更新了第一个指令（不起作用的指令）以在 html 中设置一个属性，以便在我记录范围时可以在控制台中查找它。事实证明它在 $parent 范围内（该属性名为“wat”）。但为什么？为什么它不起作用是有道理的，但我不明白为什么那个 html 不能访问相同的隔离范围？有没有办法强制我插入的 html 使用隔离范围？

编辑2：好的，关于我为什么要这样做的问题很多，最好的描述可以在这里找到。 https://github.com/angular/angular.js/issues/7874。本质上，我们想要 ng-repeat 一些转入内容，并将 ng-repeat 中的项目暴露给转入内容，但您不能在 Angular 中这样做，因为转入内容只能访问父范围。

目标是让第一个指令像第二个指令一样工作，因为两个属性（值和名称）的值通过在编译函数中附加 html 来工作，具有独立的范围。

Answer 1

这就是我将如何去做（我认为）你想要实现的目标

http://plnkr.co/edit/mL7h7Hf8TkkpfsPNoL6g?p=preview

通过使用带有 transclude: true 和链接函数的模板，您可以在解释角度表达式的同时用模板替换元素来获得所需的结果

您可以使用 replace: true 进一步自定义您的指令

app.directive('widget',function(){
  return {
    restrict:'E',
    transclude: true,
    template: '<span ng-bind="wat=\'YES\'"></span><div>{{name}}</div><span>{{value}}</span>&nbsp;<span>There</span>',
    scope:{
      name:'@',
      value:'='
    },
    link:function($scope, tElement){
    }
  }
});