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

注意:我正在修改这个问题以提高评分。

我开发了以下具有独立作用域的指令:

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插件的简单示例。

点击这里查看示例HTML文件，按照下载

我注意到以下脚本标签只有在我将它们放在</body>标签之前才能工作(与上面链接中提供的示例源代码相同):

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

如果我把上面的脚本标签放在<head>标签中，它不受影响。

谁能给我解释一下为什么?

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

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

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

我必须使用具有继承作用域check-if-required的指令在外层，而具有隔离作用域upload-photo-list的指令在内层。

然而，我不得不为指令check-if-required做两个修改:

在link函数中添加$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());
    }
})

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

欢迎任何改进的反馈。

Tarek

老问题:

相关内容

最新更新

热门标签：