Javascript 在不创建隔离作用域的情况下触发销毁 用例

我正在开发的应用程序是相当动态的。输入根据模板变量动态更改。我的指令基于各种范围变量，将获取必要的模板并构建html输出。事件还与这些模板中的每个模板关联，因此需要销毁childScope，以便在范围更改时触发相应的销毁事件。特别是，我发现如果不调用destroy方法，就会发生内存泄漏

[编辑] 为了进一步扩展定义，本质上我们有一个通用小部件。对于可以看到按钮的用户，该按钮会根据单击次数更改值。对于视力受损者，此按钮呈现为单选按钮列表。按钮本质上是渲染在图像顶部的“热点”。这用于评估关节疼痛评分。然而，视力受损的患者看不到按钮，但屏幕阅读器可以读出无线电输入。平板电脑用于数据采集，并在研究人员、患者和医生之间传递。切换按钮将在视觉模式和视力受损模式之间切换，因为医生可以更快地理解图像视图。WiFi是一个问题，因为医院的连接不稳定，所以我用angular做了一个水疗

它的工作原理是有一个名为template的变量，它被传递到指令中。链接将读取此变量并加载缓存的相应模板。按下按钮时，模板可能会更改，链接将重新读取此内容。我发现的问题是，当我将jQuery滑块从一个滑块切换到一个针对视力受损者的无线电列表输入时，它会导致内存泄漏。切换视图的次数越多，消耗的内存越多。但是，如果在$compile之前调用destroy方法，那么内存泄漏问题就会消失。不幸的是，调用scope.$destroy会破坏一切，因此使用了一个childScope来防止这种情况

这可以通过在模板变量上使用ng if或ng switch来完成，但是，我们采用了编程路线，因为本质上，接下来的一个要求是这些小部件应该在多个视图中动态更改。目前我们只有视力和视力受损模式，但他们也希望它有“医生视图”、“研究者视图”、“患者视图”、“视力受损患者视图”、“老年人视图”等。。。根据视图，小部件将更改其外观和功能。i、 e.某些视图可能具有其他行为

问题 我无法将模型绑定到生成的childScope。我认为根本问题在于，$new（）创建了一个孤立的作用域，因此我怀疑它无法与外部世界通信。但是，我真正想做的是正确地销毁作用域以避免内存泄漏

我的问题是:

• 有没有办法让childScope与父ng模型绑定
• 还有其他方法可以开火摧毁吗

代码 这是我的非工作代码的精简版。我已经消除了大部分复杂性，将其简化为基本组件

模板

输入
输出
{{foo}}
{{bar}}
{{qux | json}

应用

函数ctrl（$scope）{
$scope.foo=“foo”；
$scope.bar=“bar”；
$scope.qux={value:“qux”}；
}
有棱角的
.module（'应用程序'，[]）
.directive（'doodad'，函数（$compile）{
变量链接器=函数（范围、元素）{
儿童镜；
/*用于在子窗口小部件上触发销毁*/
var getNewScope=函数（oldScope）{
如果（旧范围）{
oldScope.$destroy（）；
oldScope=null；
html（“”）；
}
返回范围。$new（）；
};
var renderTemplate=函数（）{
childScope=getNewScope（childScope）；
/*模板是动态的，例如硬编码的*/
/*事件&许多其他有趣的事情都在这里*/
html（“”）；
$compile（element.contents（））（childScope）；
}
范围：$watch（'template'，renderTemplate）；
}
返回{
限制：'E'，
替换：正确，
要求：“^ngModel”，
范围：{
ngModel:“=”，
模板：'='
},
链接：链接器
}
})
.directive（'nestedDoodad'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
ngModel:“=”
},
模板：“”
}
});

JSFiddles

有没有办法让childScope与父ng模型绑定

还有其他方法可以开火摧毁吗

参考资料

---

为什么要创建子作用域？此外，这个示例可以完全在指令的模板中完成。“你想通过自己修改DOM来解决什么问题，而不是让Angular为你做这件事？”乔纳森更新了上面的用例来扩展这个问题。

<div ng-app="app" ng-controller="ctrl">
    <div>
        <h1>Input</h1>
        <doodad ng-model="foo"></doodad>
        <nested-doodad ng-model="bar"></nested-doodad>
        <nested-doodad ng-model="qux.value"></nested-doodad>
    </div>
    <div>
        <h1>Output</h1>
        <span>{{ foo }}</span>
        <span>{{ bar }}</span>
        <span>{{ qux | json }}</span>
    </div>
</div>

    function ctrl($scope) {
    $scope.foo = "foo";
    $scope.bar = "bar";
    $scope.qux = { value : "qux" };
}
angular
  .module('app', [])
  .directive('doodad', function($compile) {
      var linker = function(scope, element) {
          var childScope;

          /* Used to fire destroy on child widgets */
          var getNewScope = function(oldScope) {
            if (oldScope) {
                oldScope.$destroy();
                oldScope = null;
                element.html('');
            }
            return scope.$new();
          };

          var renderTemplate = function() {
              childScope = getNewScope(childScope);
              /* template is dynamic - hardcoded for example */
              /* events & lots of other funny stuff are bound here */
              element.html('<input type="text" ng-model="ngModel" />');
              $compile(element.contents())(childScope);
          }

          scope.$watch('template', renderTemplate);
      }
      return {
          restrict: 'E',
          replace: true,
          require: '^ngModel',
          scope: {
              ngModel : '=',
              template: '='
          },
          link: linker
      }
  })
  .directive('nestedDoodad', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              ngModel : "="
          },
          template: '<div><doodad ng-model="ngModel"></doodad></div>'
      }
  });

$scope = $parent.$scope;

angular.element(document).injector().get('$rootElement').removeClass("ng-scope")