javascript - 在不创建隔离范围的情况下进行射击摧毁

Question

用例

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

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

它的工作原理是有一个名为 template 的变量被传递到指令中。该链接将读取此变量并加载缓存的适当模板。当按下按钮时，模板可能会发生变化，并且链接将重新读取此内容。我发现的问题是，当我将 jQuery slider 从 slider 切换为视障人士的单选列表输入时，它会导致内存泄漏。 View 切换的次数越多，消耗的内存就越多。但是，如果在 $compile 之前调用 destroy 方法，内存泄漏问题就会消失。不幸的是，调用scope.$destroy会破坏所有内容，因此使用childScope来防止这种情况发生。

这可以在模板变量上使用 ng-if 或 ng-switch 来完成，但是，我们采用了编程路线，因为本质上，即将出现的要求是这些小部件应该在多个 View 中动态更改。目前我们只有视觉和视障模式，但他们还希望它有“医生 View ”、“研究人员 View ”、“患者 View ”、“患者视障 View ”、“老人 View ”等......取决于 View 中，小部件将更改其外观和功能。即某些 View 可能有额外的行为。

问题

我无法将模型绑定(bind)到生成的 childScope。我认为根本问题是 $new() 创建了一个隔离的范围，因此我怀疑它无法与外界通信。然而，我真正想做的是正确地销毁作用域以避免内存泄漏。

我的问题是:

• 有没有办法让 childScope 与父 ng-model 绑定(bind)？
• 还有其他方法可以烧毁吗？

代码

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

模板

<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>'
      }
  });

JSFiddle

• Non-working Code
• Working Example without the childScope

Answer 1

Is there a way to have the childScope bind with the parent ng-model?

$scope = $parent.$scope;

Is there a another method to fire destroy?

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

引用文献

• AngularJS: Developer Guide: Working With CSS