角-UI-引导定制的工具提示/酥料饼与2路数据绑定 [英] Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

问题描述

我用我的当前项目角UI的引导和我有一个酥料饼的一个要求，即将允许用户把一个给定的元素上的一些动作（重命名/编辑/删除/等）。由于角UI的引导酥料饼不允许自定义HTML和数据绑定在默认情况下，我抄他们的提示/酥料饼 .provider 和。指令在努力定制，以我的需求。

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-点击绑定正在丧失

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

第二个问题：可以双向数据绑定进行设置，使我不必手动设置做 $范围母公司$ 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:

• 的酥料饼 .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 这里只是改变了，在努力获得双向绑定的标题工作字段：


• 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>';

我AP preciate任何帮助，我觉得编译指令和供应商似乎是大的心理障碍，开始接触角的时候。我一直试图弄清楚和处理这些指令，以便我可以从中学习，丝毫不亚于真正需要的组件本身。

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的显示属性控制它。

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.

第二的是实际上只是使之与父范围联系起来。但是，它会创建我的做法子作用域。我想你可以用手表做的一样好。

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.

这篇关于角-UI-引导定制的工具提示/酥料饼与2路数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！