加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS – 从partial in指令中获取html

发布时间:2020-12-17 17:17:44 所属栏目:安全 来源:网络整理
导读:我以角度创建了一个自定义指令,这样我就可以在提交时淡出一个表单,并用带有自定义消息的模板替换它. 所需的工作流程如下: 用户填写表单并单击“提交”. 控制器使用新对象更新模型,并发出带有一些args的“formSubmitted”事件. 指令侦听事件并淡出表单. 该指
我以角度创建了一个自定义指令,这样我就可以在提交时淡出一个表单,并用带有自定义消息的模板替换它.
所需的工作流程如下:

>用户填写表单并单击“提交”.
>控制器使用新对象更新模型,并发出带有一些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中提取的代码(它不仅仅是一个标题,这就是我想从文件中加载它的原因)

解决方法

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读