问题：

Question

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

我使用隔离范围开发了以下指令：

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指令本身就可以正常工作，并且已被广泛使用。现在，我无法将其更改为孤立的范围。该指令实际上称为check-if-required，将循环遍历所有子输入字段，以查明是否有必填字段，并使其成为必需字段。

就在几天前，我了解了具有隔离范围的指令，可用于开发可重用的组件。我喜欢这个想法，我开了一个电话upload-photo-list，我在这里称之为outerIsolated。

无论如何我能轻易解决这个问题吗？

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

angular.element(document).ready(function (){...}

...但是，外部指令无法访问内部指令生成的HTML元素。

感谢您寻求解决方案的帮助。

谢谢。

旧问题：

注意：此部分已过时。我把它留在这里仅用于跟踪目的。

我正在使用ng-signature-pad和signature-pad插件构建一个简单的示例。

Click here to see the sample HTML file as per the download

我注意到以下脚本标记只有在我将它们放在</body>标记之前时才有效（与上面链接中提供的示例源代码相同）：

  <script src="js/app.js"></script>

如果我将上述脚本标记放在<head>标记中，则不会受到影响。

有人可以向我解释原因吗？

Answer 1

我需要更详细地查看您正在引用的项目，但我想您正在使用的库和app.js是引用页面上的元素。

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

Answer 2

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

我必须使用带有继承范围check-if-required的指令在外层，并且在内层使用具有隔离范围upload-photo-list的指令。

但是，我必须对指令check-if-required进行两次修改：

在链接函数中添加$timeout以确保内部指令在循环遍历所有input元素之前已完成呈现HTML，如下所示：

代码：

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

到目前为止，这个解决方案对我来说效果很好。

欢迎任何改进的反馈。

塔雷克

具有继承范围的内部嵌套指令，在具有隔离范围的外部指令中使用

问题：

旧问题：

2 个答案: