分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – Angular UI Modal中的Transclusion无法正常工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

this plunk的目标是将元素从控制器转换为Angular UI Modal,其中Modal由指令包装.解决方案应遵循以下前提：

>该指令声明了字段的转换.这些字段包含在控制器HTML标记中的指令声明中.
>控制器中声明的这些字段应显示在模态中.
>这些字段的范围应该可以在控制器中访问(请参阅我在控制器中声明了@L_772_4@应该在Modal中设置值的input1变量).
>我定义了@L_772_4@内容元素来转换字段.此元素位于模态的模板中.我不确定这个模板何时可以转录它.

总而言之,目标是在控制器HTML标记中声明一组字段并在模态中可用,其中模式包含在指令中,范围在控制器中管理.任何想法将不胜感激.

HTML

<div the-modal control="modalCtl">
    <p>some text</p>
    <input type="text" ng-model="input1" />
</div>

<button type="button" ng-click="open()">Open me!</button>

使用Javascript

var app = angular.module("app",['ui.bootstrap']);

app.controller("ctl",function($scope,$timeout) {

  $scope.modalCtl = {};

  $scope.input1 = "abc";

  $scope.open = function(){
    $scope.modalCtl.openModal();
  };

});


app.directive("theModal",function($uibModal) {
  return {
    reStrict: "AE",scope: {              
      control: "="
    },transclude: true,link: function (scope,element,attrs,ctrl,transcludE) {
      scope.control = scope.control || {}

      scope.control.openModal = function () {
        scope.instance = $uibModal.open({
          animation: false,scope: scope,template: '<div>in the template</div><div class="content"></div>'
        });
        element.find('.content').append(transclude());
      };
    }
  }
});

解决方法

你已经足够接近实现你的目标,但是,你需要考虑以下几点：

>首先,根据UI Bootstrap docs,$uibModal.open()方法的选项中有@L_772_4@appendTo属性,默认为body.

>其次,AngularJS附带jQLite,jQuery的轻量级版本.这意味着对jQuery的大多数功能的支持有限.其中一种情况是使用.find()方法,该方法仅适用于标记名称.

为了使它与jQuery一起工作(尽管你真的不必因为你仍然可以在链中使用.children()来@L_874_22@嵌套的DOM元素),你必须在Angular之前加载jQuery(我想你已经).

有关详细信息,请参阅AngularJS docs on angular.element.
>渲染DOM需要花费一点时间用于Angular,因为它需要制作与范围和视图相关的正确绑定,以完成摘要周期等等.
因此,您最终可能会立即@L_874_22@实际上可能尚未呈现的DOM元素.

考虑到以上几点,自定义指令theModal的link函数中的openModal方法应如下所示：

scope.control.openModal = function () {
    scope.instance = $uibModal.open({
        animation: false,template: '<div>in the template</div><div class="content"></div>',/**
        * Make sure the modal is appended to your directive and NOT `body`
        */
        appendTo: element  
    });


    /**
    * Give Angular some time to render your DOM
    */
    $timeout(function (){
        /**
        * In case jQuery is not available
        */
        // var content = element.children('.modal').children('.modal-dialog').children('.modal-content').children('.content');

        /**
        * Since you have jQuery loaded already
        */
        var content = element.find('.content');

        /**
        * Finally,append the transcluded element to the correct position,* while also making sure that the cloned DOM is bound to the parent scope (i.e. ctl) 
        */
        transclude(scope.$parent,function(clonedContent){
            content.append(clonedContent);
        });
    });
};