Question

我有一个观察指令，用于渲染observation.html

observation.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"
    };
});

我从observe.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>

如果我刷新浏览器，该选项卡将无响应。不知道发生了什么。由于没有响应的标签而无法调试。

我真的很乐意回答你的问题。

Answer 1

ng-include修复它。

使用以下行

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

而不是 -

templateUrl: "views/observation.html"

Answer 2

这听起来像一个无限循环！我认为您的问题是如何定义定义的本地scope变量。 observation具有双向数据绑定。因此，您将在每次递归调用时覆盖它。试试这个以避免无限循环

 scope: {
        observation: "&"
    },

这将创建一个不受父范围影响的本地指令范围。

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

@用于将字符串值传递给指令
=用于创建与传递给指令
＆安培;允许将外部函数传递给指令和调用

更新2

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

选项1：您使用@并使用JSON.stringify(observation)序列化您的对象。您可以通过字符串插值为您的指令提供此字符串。 <observation observation="{{observation}}"></observation>
选项2：您使用&并将对象传递给辅助函数，该函数将创建并从对象返回克隆。

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

2 个答案: