Angularjs 具有继承作用域的内部嵌套指令在具有隔离作用域的外部指令中使用

注意：我正在修改此问题以提高评分

我制定了以下具有独立范围的指令：

app.directive('outerIsolated', function () {
    return {
        restrict: 'A',
        scope: {
            theData:'=',
            ...
        },
        replace: true,
        templateUrl: './photo-list-template.html',
        link: function ($scope, elm, attrs) {
           ...
           ...
           ...
        }
    };
});

此外，我还开发了以下具有继承范围的内部指令

app.directive('innerInherited', ['$compile', '$timeout', '$parse', function ($compile, $timeout, $parse) {
    return {
        scope: false;
        link: function (scope, el, attrs, ngModel) {
           ...
           ...
           ...            }
    };
}]);

问题是： 如果我使用指令

outerIsolated

作为内部指令

innerInherited

的父指令，那么对继承范围变量的所有引用都将无效

innerInherited

指令本身运行良好，已被广泛使用。现在，我无法将其更改为隔离范围。该指令实际上被称为

检查是否需要

，它将在所有子输入字段之间循环，以确定是否有人需要该字段，并使其成为必需字段

就在几天前，我了解了具有隔离作用域的指令，它可以用于开发可重用组件。我喜欢这个想法，我开发了一个叫

上传照片列表

，我在这里称之为

外部隔离

有没有我能轻松解决这个问题的方法

一种直接的方法是反转指令的嵌套。因此，我尝试在外部级别使用具有继承范围的指令，但是，现在的问题是，外部指令的链接函数在被模板替换后没有看到内部指令的元素。我甚至使用此代码尝试等待文档准备就绪：

angular.element（document）.ready（函数（）{…}

…但是，外部指令仍然无法到达内部指令生成的HTML元素

感谢您帮助我们找到解决方案

多谢各位

老问题: 注意：此部分已过时。我将其保留在此处仅用于跟踪目的

我正在使用ng签名板和签名板插件构建一个简单的示例

我注意到，以下脚本标记只有在我将它们放在

标记之前时才有效（与上面链接中提供的示例源代码相同）：

如果我将上述脚本标记放置在

标记中，则不会受到影响

---

有人能给我解释一下原因吗？

我需要更详细地了解您正在引用的项目，但我可以想象您正在使用的库和app.js正在引用页面上的元素

---

如果在HEAD标记中有脚本，则这些元素不在那里。通过将它们放在BODY元素的底部，可以确保这些元素实际上在浏览器中。

解决我的问题的最快方法如下

我必须使用带有继承范围

的指令检查是否需要

才能在外部级别上，而带有隔离范围

上传照片列表的指令则在内部级别上

但是，我必须对指令
进行两次修改，如果需要检查
：

在link函数中添加
$timeout
，以确保内部指令在遍历所有
输入
元素之前已完成其HTML的呈现，如下所示：
代码：

必须根据元素的范围编译元素：
代码：

到目前为止，这个解决方案对我很有效

欢迎任何需要改进的反馈

塔瑞克
你的问题有点让人困惑。你说“如果我把它们放在标签上…”示例显示了正文标记中的脚本标记。您在问题中指的是什么标记？我更正了问题。感谢您的反馈。将脚本放在正文末尾的原因是确保在运行脚本之前加载DOM。如果将其移动到头部，则不会加载DOM，因此元素不可用标签用于操纵，这可能是它失败的原因。脚本标记本身可能在两个地方都起作用，问题在于您的代码。为什么否决？本质上是对问题评论的总结回答…非常感谢！能够在不查看代码的情况下分析情况是如此明智。您完全正确。这与jQuery document ready代码块的效果相同，以确保所有元素在代码访问之前都已创建。这在AngularJS中是不可能的，所以这种奇怪的技术也可以。甚至w3schools.com也建议将脚本标记放在
标记之前。我已经更改了问题。感谢您的反馈。
  <script src="js/app.js"></script>

var children;
$timeout(function() {
    children = $(":input", el);
    el.removeAttr('check-if-required');
    angular.forEach(children, function(value, key) {
        ...
        ...
    });
})

angular.forEach(children, function(value, key) {
    if(typeof (value.id) != 'undefined') {
        if (scope.isFieldRequired(value.id)) {
        angular.element(value).attr('required', true);
        $compile(value)(angular.element(value).scope());
    }
})