0

我正在开发我的第一个 Angular 应用程序（耶！）。我正在尝试拥有一个可以声明标题、自定义内容和任何数字操作按钮的通用模式组件。下面是背景设置，然后是我的问题在底部。

这是我想使用该指令的方式。

<!-- in app/views/library/index.html -->
<!-- outside <modal> #i_work works great -->
<select id="i_work">
  <option value="{{libraryType.id}}" ng-repeat="libraryType in libraryTypes">{{libraryType.name}}</option>
</select>

<modal id="library_new" title="My Custom Title">
  <form>
    <!-- inside <modal> #i_dont_work doesn't work -->
    <select id="i_dont_work">
      <option value="{{libraryType.id}}" ng-repeat="libraryType in libraryTypes">{{libraryType.name}}</option>
    </select>
  </form>

  <modal-buttons>
    <!-- [toggle-modal] is another directive that shows/hides a given <modal> -->
    <button type="button" toggle-modal="library_new">cancel</button>

    <button type="submit" ng-click="addLibrary()">save</button>
  </modal-buttons>
</modal>

这是指令代码：

// in app/scripts/directives/modal.js
'use strict';
angular.module('sampleAngularApp')
  .directive('modal', [function () {
    return {
      templateUrl: '/scripts/directives/modal.html',
      restrict: 'E',
      transclude: true,
      link: {
        pre: function preLink(scope, element, attrs) {
          scope.id = attrs.id;
          scope.title = attrs.title;
        },
        post: function preLink(scope, element, attrs) {
          // hacky-hack to transclude specific content into other targets.
          //   bound event handlers should be preserved (as implemented they are).
          //   this actually works
          var buttonWrap = element.find('modal-buttons');
          buttonWrap.children().each(function (index, button) {
            element.find('.modal-footer').append(button);
          });
          buttonWrap.remove();
        }
      }
    };
  }]);

...和指令模板：

<!-- in app/scripts/directives/modal.html -->
<div class="modal" role="dialog">
  <div class="modal-header">
    <span class="title">{{title}}</span>
    <button type="button" class="close" toggle-modal="{{id}}">close</button>
  </div>

  <!-- the contents of .modal-body should be everything inside <modal> above, -->
  <!--   except for <modal-buttons> -->
  <div class="modal-body" ng-transclude />

  <!-- the contents of .modal-footer should be the contents of <modal-buttons> -->
  <div class="modal-footer" />
</div>

问题：

1）考虑<select>上面控制器视图中的元素。#i_work用 s 正确渲染<option>就好了。#i_dont_work呈现<select>没有<option>s 的 a。libraryTypes好像不在范围里面<modal>。为什么会这样，我该如何解决？

2) 有没有更好的方法将特定内容转换为多个目标？Google 的 Polymer 项目提供<content />了一个可选[select]属性来提供多个插入目标。Angular有这样的东西吗？（有关更多信息，请参见Polymer 的网站。）

4

0 回答 0