AngularJS - 从partial in指令中获取html

Question

我以角度创建了一个自定义指令，这样我就可以在提交时淡出一个表单，并用带有自定义消息的模板替换它。 所需的工作流程如下：

• 用户填写表单并单击“提交”。
• 控制器使用新对象更新模型，并使用一些args发出“formSubmitted”事件。
• 该指令侦听事件并淡出表单。
• 该指令加载一个部分html，其中填充了事件中的args。

我解决了前3个步骤，但是我无法绕过最后一步（我不想将html硬编码为Strings，如果可能的话我想从另一个文件中取出它）。

怎么做到呢？

编辑： 一些示例代码（简化）：

这是形式：

<section class="hero-unit {{containerClass}}" tk-jq-replace-children>
    <h2>{{formTitle}}</h2>
    <form class="form-search" name="solform" novalidate>
        <fieldset>
        ...

这是控制器：

if( formWasSavedOk ){
    $scope.formSubmittedMsg = msg;
//Here emits the custom event
    $scope.$emit( 'solicitud:formSubmitted' );
}

这是指令：

.directive( 'tkJqReplaceChildren', function( $compile ){
    return {
        link: function( $scope, $iElement/*, $iAttrs*/ ){
            //The directive listens for the event
            $scope.$on( 'solicitud:formSubmitted', function( /*event*/ ){
                $iElement
                    .children()
                    .fadeOut(1000)
                    .promise()
                    .done(function(){
                        var $detachedElments = $(this).detach();
                        //The html is compiled and added to the DOM
                        $iElement.html( $compile( "<h2>{{formSubmittedMsg}}</h2>" )($scope) );
                        $scope.$apply();
                      });
            });
        }
    };
});

<h2>{{formSubmittedMsg}}</h2>是我想从app / partials / create / createdOk.html中提取的代码（它不仅仅是一个标题，这就是我想从文件中加载它的原因）

Answer 1

我相信获取外部html片段的“Angular方式”是使用ng-include指令 ：

<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>

至于为什么你的指令不起作用，我的猜测是你在指令的链接阶段获取html，而不是编译阶段。 关于这个答案的区别有一个很好的解释，但它几乎是这样的：

如果你要进行DOM转换，那么应该编译如果要添加一些功能是行为更改，它应该在链接中。

我建议将大部分逻辑从指令转移到控制器：使用$ resource或$ http服务获取数据，然后将结果传递给新创建的ng-directive范围。

Answer 2

我不确定你是否在寻找$http服务。 我创建了一个探测器http://plnkr.co/edit/13kFLh9RTsIlO4TaFIFQ?p=preview ，它不包括前三个步骤，但涵盖了您需要的第四步。

在plunker中单击文本“单击此处提交表单”，并注意插入新文本。 这个新文本来自名为tmpl.html的外部文件。 在firebug控制台中，您可以在单击文本后注意到获取调用，以获取tmpl.html