Question

我创建了一个指令，当用户点击按钮时显示模态：

指令模板：

<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">....的模式

如何在编译之前获取指令内部内容并将其替换为模板

Answer 1

嗯......对于像这样的本地内容使用modal实际上是非常有趣的模式。

所以，要完成所有你需要的是transclude angular指令选项。有good article about 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>

只需按一下按钮即可点击按钮。

<强>指令

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
    };
}]);

所有操作都已注释。通常我们从指令内提供的transcluded函数中获取内部内容，并将其设置为范围。当用户点击showModal按钮时，我们将内容插入到某个模式持有者中，这可能位于html文件中的任何位置。

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

AngularJS：在编译之前获取指令的html内容

1 个答案: