Question

我认为我想要做的是将向导的每一步完全隔离到自定义元素指令中。

我认为这将允许我完全封装向导的每个页面的细节。例如：

<custom-wizard-tag>
    <enter-name-page page="1" name-placeholder="name"/>
    <enter-address-page page="2" name-placeholder="name" address-placeholder="address" last-page/>
</custom-wizard-tag>

到目前为止，这么好。上面的每个元素都有自己的指令，每个元素都指定了templateUrl和一个控制器（当然，templateUrl可以作为属性提供）。

我希望向导的每个页面都能继承＆＃39;一些行为。 UI组件将包含按钮，这些按钮需要查询外部范围，例如，以确定是否可以向前，向后等前进。我们还需要在父作用域上调用成员函数，以便实际向前和向后移动向导，并检查当前页码是否与我们的页码匹配。

我是新手，所以请耐心等待......

我阅读了directive上的文档，并认为我可以使用scope: { onNext: '&onNext' }来继承＆＃39;来自前一个范围的onNext函数（假设是＆＃39;类似向导的函数＆＃39;）。然而，这不是角度似乎做的。它似乎希望通过名为onNext的属性映射内部范围on-next，从而打破封装，因为现在UI元素必须引用父范围中的函数 - 这正是我想要的避免。

我是在咆哮错误的树，还是有一种惯用的方式来做到这一点。网络搜索的一天并没有让我走得太远，但我可能会使用错误的搜索词。

感谢您的耐心等待。

Answer 1

scope: { onNext: '&onNext' } 不会做任何继承，你必须在模板（模板范围）中定义onNext，就像使用page属性一样：<enter-name-page page="1"

如果在onNext函数或其控制器中的customWizardTag指令中定义了函数link，则必须将其放在控制器中，因为控制器可以被传递给child指令。然后，您将能够在somethingPage指令的链接函数中传递父指令的控制器。

.directive('parentDirective, function() {
    return {
        controller: someControllerThatHasOnNext,
    }
 })

.directive('childDirective', function() {
    return {
        require: '^^parentDirective',
        link: function(scope, element, attrs, theParentDirectivesController){
            theParentDirectivesController.onNext();
        }
    }
})

如果这是你想要的

在嵌套的自定义指令中解耦UI和控制器

1 个答案: