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

angularjs – Angular-UI-Bootstrap自定义工具提示/弹出窗口,具

发布时间:2020-12-17 07:39:20 所属栏目:安全 来源:网络整理
导读:我在我目前的项目中使用 angular-ui-bootstrap,而且我需要一个popover,这将允许用户对给定的元素(重命名/编辑/删除/ etc …)采取一些行动.由于angle-ui的引导弹出窗口默认不允许自定义html或数据绑定,所以我已经复制了他们的工具提示/ popover .provider和.d
我在我目前的项目中使用 angular-ui-bootstrap,而且我需要一个popover,这将允许用户对给定的元素(重命名/编辑/删除/ etc …)采取一些行动.由于angle-ui的引导弹出窗口默认不允许自定义html或数据绑定,所以我已经复制了他们的工具提示/ popover .provider和.directive,以便根据自己的需要进行自定义.

主要问题:弹出窗口关闭并重新打开后,ng-click绑定将丢失.

次要问题:可以设置双向数据绑定,以便我不必手动设置范围$parent.$parent.item?

Plunker:http://plnkr.co/edit/HP7lZt?p=preview

瞥一下对原始tooltip.js的修改:

> popover.directive是最被修改的:

.directive('iantooltipPopup',function () {
    return {
      restrict: 'E',replace: true,scope: { mediaid: '@',title: '=',content: '@',placement: '@',animation: '&',isOpen: '&' },templateUrl: 'popover.html',link: function (scope,element,attrs) {
        scope.showForm = false;

        scope.onRenameClick = function () {
          console.log('onRenameClick()');
          scope.showForm = true;
        };

        scope.onDoneClick = function () {
          console.log('Title was changed to: ' + scope.title);
          scope.showForm = false;
          scope.$parent.$parent.item.title = scope.title;
          scope.$parent.hide();
        };
      }
    };
  })

>工具提示.provider只是在这里改变,以努力获得双向绑定到标题字段上工作:

var template = 
  '<'+ directiveName +'-popup '+
    // removed
    // 'title="'+startSym+'tt_title'+endSym+'" '+
    'title="tt_title" ' +
    'content="'+startSym+'tt_content'+endSym+'" '+
    'placement="'+startSym+'tt_placement'+endSym+'" '+
    'animation="tt_animation()" '+
    'is-open="tt_isOpen"'+
    '>'+
  '</'+ directiveName +'-popup>';

我感谢任何帮助,感觉编译的指令和提供者在开始使用Angular时似乎是很大的精神障碍.我一直在试图弄清楚和操纵这个指令,所以我可以从中学习,就像实际需要组件本身一样.

这是工作 plunker

问题是从原来的工具提示.关闭后,下一次打开工具提示时,它不会再次编译工具提示. (工具提示触发器的链接功能仅在第一时间运行.)

我的方法是不要删除工具提示,只是通过CSS的显示属性来控制它.

我也在pull request讨论这个问题.

我只是更新plunker.

第二个实际上只是使它与父范围链接.然而,它将通过我的方法创建一个子范围.我想你也可以使用手表来做到这一点.

(编辑:李大同)

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

    推荐文章
      热点阅读