4

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

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

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

如何做呢？

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

这是表格：

<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 中提取的代码（它不仅仅是一个标题，这就是我想从文件中加载它的原因）

4

2 回答 2

2

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

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

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

如果要进行 DOM 转换，如果要添加一些特性是行为更改，则应该编译，它应该在链接中。

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

于 2013-02-28T19:41:57.613 回答
2

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

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

于 2013-03-01T02:57:57.433 回答