AngularJS：我可以在指令中使用转置的内容而不重新定义控制器吗？

我有一个选项卡控件，可以根据所选选项卡显示或隐藏控件中的内容

这已经足够好了，但是选项卡窗格的内容在作用域中开始出现异常行为。在转包内容中引用范围似乎不再引用已定义的控制器范围

这可以通过任何包含转置内容的指令看到。给定特定控制器：

app.controller("MainCtrl", function ($scope) {
  $scope.getTestText = function () {
    alert($scope.testText);
    alert(this.testText);
  }
});

在以下标记中使用：

<h1>Outside Tab</h1>
<div>
    <input type="text" ng-model="testText" />
    <button ng-click="testText = 'outside'">Set Test Text</button>
    <button ng-click="getTestText()">Get Test Text</button>
    {{testText}}
</div>

<simple-directive>
  <h1>Inside Directive</h1>
  <div>
      <input type="text" ng-model="testText" />
      <button ng-click="testText = 'inside'">Set Test Text</button>
      <button ng-click="getTestText()">Get Test Text</button>
      {{testText}}
  </div>
</simple-directive>

外部选项卡
设置测试文本
获取测试文本
{{testText}}
内部指令
设置测试文本
获取测试文本
{{testText}}

看

如果单击顶部的“设置测试文本”按钮，然后单击“获取测试文本”按钮，则两个警报显示相同的内容（“外部”）。如果单击第二个“设置测试文本”按钮，然后单击“获取测试文本”，则会出现不同的结果：尽管“this”具有预期的“inside”值，但作用域上的值仍然是“outside”

一种解决方法是在转包内容内定义控制器，如下所示：

<simple-directive>
  <h1>Inside Directive</h1>
  <div ng-controller="MainCtrl">
      <input type="text" ng-model="testText" />
      <button ng-click="testText = 'inside'">Set Test Text</button>
      <button ng-click="getTestText()">Get Test Text</button>
      {{testText}}
  </div>
</simple-directive>

内部指令
设置测试文本
获取测试文本
{{testText}}

但如果可能的话，我宁愿避免这样

---

所以我的问题是：有没有更好的方法来做到这一点而不改变范围？这只是预期的行为吗？

ngTransclude

创建一个子（非隔离）作用域：

默认情况下，$transclude函数创建一个新的子作用域：

---

最好的解决方案是避免在范围上引用原语： 为什么不使用原语呢？看到类似的答案

一个演示插销器：

模板：

<input type="text" ng-model="test.text" />
<button ng-click="test.text = 'inside'">Set Test Text</button>
<button ng-click="getTestText()">Get Test Text</button>
{{test.text}}

app.controller("MainCtrl", function ($scope) {
  $scope.test = {};
  $scope.getTestText = function () {
    alert($scope.test.text);
    alert(this.test.text);
  }
});

<input type="text" ng-model="test.text" />
<button ng-click="test.text = 'inside'">Set Test Text</button>
<button ng-click="getTestText()">Get Test Text</button>
{{test.text}}

app.directive('simpleDirective', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {},
        link: function(scope,elm,attrs,ctrl,$transclude){
          $transclude(scope.$parent, function(clone){
            elm.after(clone);
          })
        }
    };
})