4

我正在创建一个指令，当用户单击按钮时显示模式：

指令模板：

<button ng-click="showModal()">Show Modal</button>

指令用法：

<modal-btn>
  <div id="modal-content">
    <p>This is the modal content that I want to render in the Modal {{someModel}}</p>
  </div>
</modal-btn>

所以在我编译指令之前，我需要抓住内容，显示按钮，当用户点击按钮时，我会显示包含<div id="modal-content">....

如何在编译之前获取指令内部内容并用模板替换它

4

1 回答 1

4

嗯.. 使用带有本地内容的模态实际上是非常有趣的模式。

因此，要实现这一点，您需要的只是transclude角度指令的选项。有一篇关于 transclude 的好文章。

HTML

<modal-btn>
  <div class="modal-content">
    Lorem Ipsum Dolor Sit Amet `{{currentScopeData}}`
  </div>
</modal-btn>

我们在其中创建模态 btn 指令和模态内容。看一下表达式 - 在这一点上，我们实际上可以使用currentScopeData当前范围（页面的控制器或其他）。

指令模板

<button ng-click="showModal()">Show Modal</button>

只是一个带有 ng-click 的按钮，就像你的一样。

指示

App.directive('modalBtn', ['Config', function (Config) {

    function link(scope, element, attrs, ctrl, transclude) {

        // Get your modal holder element which may be located anywhere in your application
        var modalHolder = angular.element(document.querySelector('#modal-holder'));

        /**
         * Get transcluded content (which is located inside <modal-btn></modal-btn>)
         *     and set it into scope
         */
        transclude(scope, function(clone, scope) {
            scope.modalContent = clone;
        });

        /**
         * On button click set our transcluded content to the modal holder area 
         */
        scope.showModal = function () {
            modalHolder.empty().append(scope.modalContent);
        }
    }

    return {
        templateUrl: Config.rootPath + 'shared/modal/modal-btn-view.html',
        link: link,
        replace: true,
        // Set transclude option
        transclude: true
    };
}]);

所有动作都被评论。通常我们从指令内部提供的嵌入函数中获取我们的内部内容并将其设置为范围。当用户点击按钮 showModal 触发并将我们的内容插入到某个模态保持器中时，它可能位于您的 html 文件中的任何位置。

插入内容后，您需要提供一些显示功能的模态（可能在 modalHolder 上添加类或类似的东西，这取决于您）。

于 2015-05-17T19:01:23.687 回答