具有双向数据绑定的Angular-UI-Bootstrap自定义工具提示/弹出窗口

Question

我在当前项目中使用angular-ui-bootstrap,我需要一个允许用户对给定元素执行某些操作的popover(重命名/编辑/删除/等...).由于angular-ui的bootstrap popover默认情况下不允许自定义html或数据绑定,我已经复制了他们的工具提示/ popover,.provider并.directive努力根据我的需要进行自定义.

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

次要问题:是否可以设置双向数据绑定,以便我不必手动设置scope.$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仅在此处更改,以便在该title字段上进行双向绑定:

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时的一大难题.我一直在努力弄清楚并操纵这个指令,这样我就可以从中学习,就像实际需要组件本身一样.

Answer 1

这是工作的plunker

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

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

我也提出拉动请求来讨论这个问题.

我只是更新了plunker.

第二个实际上只是让它与父范围链接.但是,它将使用我的方法创建子范围.我想你也可以用手表来做.