javascript - AngularJS:在编译前获取指令的html内容

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

嗯.. 像这样将模态与本地内容一起使用实际上是一种非常有趣的模式。

因此，要完成此操作，您只需要使用 Angular 指令的 transclude 选项。有一个 good article about transclude .

HTML

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

我们在其中创建模态 btn 指令和模态内容。看一下表达式 - 此时我们实际上可以使用当前范围(页面 Controller 或其他)中的 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
    };
}]);

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

插入内容后，您需要提供一些模态显示功能(可以在 modalHolder 上添加类或由您决定的类似内容)。