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 指令和模态内容。看一下表达式——此时我们实际上可以使用当前范围（页面控制器或其他）中的 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 上添加 class 或由您决定的类似内容）。

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

AngularJS: Get html content of a directive before compile

javascript

angularjs

angularjs-directive

angularjs-compile