Question

我正在设计一个想法来定义一个设置模式，但我对角度很新，并且无法绕过递归嵌套指令来在我的作用域中构建一个树来表示html结构。

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>

向导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>

指令代码

在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。

Answer 1

你有可能把它放在fiddle吗？

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

1 个答案: