具有 2 路数据绑定的 Angular-UI-Bootstrap 自定义工具提示/弹出框 [英] Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

问题描述

我在当前项目中使用 angular-ui-bootstrap，我需要一个弹出框将允许用户对给定元素采取一些操作(重命名/编辑/删除/等...).由于 angular-ui 的 bootstrap popover 默认不允许自定义 html 或数据绑定，我复制了他们的工具提示/popover .provider 和 .directive根据我的需要定制它.

I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover that will allow the user to take some action on a given element (rename/edit/delete/etc...). Since angular-ui's bootstrap popover doesn't allow for custom html or data-binding by default, I have copied their tooltip/popover .provider and .directive in an effort to customize it to my needs.

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

Main Problem: The ng-click bindings are being lost after the popup is closed and re-opened.

次要问题:是否可以设置双向数据绑定，以便我不必手动设置scope.$parent.$parent.item?

Secondary Problem: Can two-way data-binding be setup so that I don't have to manually set scope.$parent.$parent.item?

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

查看对原始 tooltip.js 所做的更改:

To give glance of what changes were made to the original tooltip.js:

• popover .directive 是修改最多的:

• The popover .directive is what has been modified the most:

.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 仅在此处更改，以便在 title 字段上进行双向绑定:
• The tooltip .provider was only changed here, in an effort to get two-way binding to work on the title field :

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 时似乎是很大的心理障碍.我一直在尝试找出并操作这个指令，以便我可以从中学习，就像实际需要组件本身一样.

I appreciate any help, I feel the compiled directives and providers seem to be large mental hurdles when getting started with Angular. I've been trying figure out and manipulate this directive so I can learn from it, just as much as actually needing the component itself.

推荐答案

这是有效的 plunker

问题来自原始工具提示.关闭后它会删除工具提示，但下次打开它时，它不会再次编译工具提示.(工具提示触发器的链接功能仅在第一次运行.)

The problem is from the original tooltip. It removes the tooltip after you close but next time when you open it, it doesn't compile the tooltip again. (link function for the tooltip trigger only run in the first time.)

我的方法是不删除工具提示，只需通过 CSS 中的 display 属性来控制它.

My approach is don't remove the tooltip, just control it by display attribute from CSS.

我还提出了一个拉取请求来讨论这个问题.

I also make a pull request to discuss this issue.

我只是更新了plunker.

I just update the plunker.

第二个实际上只是让它与父作用域链接.但是，它将使用我的方法创建一个子作用域.我认为你也可以使用 watch 来做到这一点.

The 2nd one is actually just make it link with the parent scope. However, it will create a child scope with my approach. I think you can use watch to do it as well.

这篇关于具有 2 路数据绑定的 Angular-UI-Bootstrap 自定义工具提示/弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！