递归嵌套指令注入了错误的父控制器

我正在研究一个定义设置模式的想法，但我对angular很不熟悉，无法理解递归嵌套指令在我的作用域内构建树来表示html结构。

index . html

部分
<wizard title="Settings Title" back-button-label="Close Wizard"> <wizard-option title="Account Settings" partial="account_settings_form"></wizard-option> <wizard-option title="API Settings"> <wizard-option title="API Partner 1" partial="partner1_form"></wizard-option> <wizard-option title="API Partner 2" partial="partner2_form"></wizard-option> </wizard-option> <wizard-option title="Notification Settings" partial="notification_settings_form"></wizard-option> </wizard>
wizard.html
<header> <div class='back'>{{backButtonLabel}}</div> <div class='title'>{{title}}</div> </header> <div> <ul> <li ng-repeat="option in controller.options"> <a href="" ng-click="select(option)">{{option.title}}</a> </li> </ul> </div> <div ng-transclude></div>
wizard-option.html
<div> <ul> <li ng-repeat="option in controller.options"> <a href="" ng-click="select(option)">{{option.title}}</a> </li> </ul> </div> <div ng-transclude></div>
<
指令代码/strong>
在coffeescript中，对不起

angular.module('app.directives.wizard', ['templates']).directive 'wizard', -> restrict: 'E' transclude: true scope: title: '@' backButtonLabel: '@' controller: 'WizardCtrl' templateUrl: 'wizard.html' angular.module('app.directives.wizard', ['templates']).directive 'wizard-option', -> require: ['^wizard', '?^wizardOption'] restrict: 'E' transclude: true scope: title: '@' controller: 'WizardCtrl' link: (scope, element, attrs, controllers) -> [parentWizardCtrl, parentWizardOptionCtrl] = controllers console.log "S: #{scope.title}##{scope.$id} - W: #{parentWizardCtrl.$scope.title}##{parentWizardCtrl.$scope.$id} - O: #{parentWizardOptionCtrl.$scope.title}##{parentWizardOptionCtrl.$scope.$id}" templateUrl: 'wizard-option.html'
控制台输出

S: Account Settings#01T - W: Settings Title#01R - O: Account Settings#01T S: API Partner 1#01V - W: Settings Title#01R - O: API Partner 1#01V S: API Partner 2#01X - W: Settings Title#01R - O: API Partner 2#01X S: Notification Settings#01Z - W: Settings Title#01R - O: Notification Settings#01Z
期望控制台输出

S: Account Settings#01T - W: Settings Title#01R - O: undefined S: API Partner 1#01V - W: Settings Title#01R - O: API Settings#SOME-ID S: API Partner 2#01X - W: Settings Title#01R - O: API Settings#SOME-ID S: Notification Settings#01Z - W: Settings Title#01R - O: undefined

我不明白的是require如何获得父控制器。我期待?^wizard-option将给我父向导选项指令的控制器，如果有的话。但它似乎总是self控制器而不是父母控制器。我认为这与透传有关，说实话，在阅读了数百个解释之后，我仍然不明白那里到底发生了什么。

我想归档的是在DOM中定义整个设置配置，这样就很容易看到向导中定义了什么设置。partial只是加载一个表单，如果没有更多的嵌套。表单也可以作为嵌套元素添加。嵌套没有限制。

如果视图只显示一层选项，选择一个选项后，它将用下一层嵌套元素的列表替换选项列表，如果有一组，则替换一个表单。它基本上是一个树，每次只显示一层。

我没有包括控制器，因为它不是关于视图和控制器本身，它现在更相关的require。如果我能得到正确的wizardOptionController，我可以在那里设置正确的options

你能把这个放在小提琴里吗?

相关内容

最新更新

热门标签：