指令的递归调用导致浏览器选项卡崩溃

Recursive call of directive crashing the browser tab

本文关键字：浏览器 选项 崩溃 递归 调用 指令      更新时间：2023-09-26

我有一个呈现observation.html 的观察指令

观察.js

angular.module('bahmni.clinical')
.directive('observation', function () {
    var controller = function ($scope) {
        console.log($scope.observation);
    };
    return {
        restrict: 'E',
        controller: controller,
        scope: {
            observation: "="
        },
        templateUrl: "views/observation.html"
    };
});

我从observation.html调用observation指令。这将递归完成。

观察.html

<fieldset>
    <div class="form-field"
         ng-class="{'is-abnormal': observation.abnormal, 'is-text': isText(observation)}">
        <span class="field-attribute"><label>{{observation.concept.shortName || observation.concept.name}}</label></span>
        <span class="value-text-only" ng-if="!observation.groupMembers">{{observation.getDisplayValue()}}</span>
        <span class="label-add-on" ng-hide="!observation.unit"> {{observation.concept.units}}</span>
        <div class="footer-note fr">
            <span class="value-text-only time">{{observation.observationDateTime | date :'hh:mm a'}}</span>
        </div>
    </div>
</fieldset>
<div ng-repeat="observationMember in observation.groupMembers">
    <observation observation="observationMember"></observation>
</div>

这是我第一次从其他指令中调用它。

someother.js

<observation observation="observation"></observation>

如果我刷新浏览器，选项卡将不负责任。不知道发生了什么。由于选项卡不负责任，无法调试。

我真的很感激你的回答。

ng include修复了它。

使用了下列

template: '<ng-include src="''views/observation.html''" />'

而不是-

templateUrl: "views/observation.html"

这听起来像是一个无尽的循环！我认为您的问题是如何定义已定义的局部scope变量。observation具有双向数据绑定。因此，您将用每次递归调用覆盖它。尝试这样做可以避免无休止的循环

 scope: {
        observation: "&"
    },

这将创建一个不受父作用域影响的本地指令作用域。

请记住，有三种方法可以定义您可以传递的本地范围属性：

  • @用于将字符串值传递到指令中
  • =用于创建到传递到指令中的对象的双向绑定
  • &允许将外部函数传递到指令中，并且已调用

更新2

您的主要问题似乎是，每次递归调用都会覆盖变量observation。所以你有两个选择：

  • 选项1：使用@并使用JSON.stringify(observation)序列化对象。这个字符串可以通过字符串插值提供给指令。<observation observation="{{observation}}"></observation>

  • 选项2：使用&并将对象传递给助手函数，该函数将从对象创建并返回克隆。

相关文章：