12

我在我当前的项目中使用angular-ui-bootstrap，并且我需要一个弹出框，它允许用户对给定元素采取一些操作（重命名/编辑/删除/等...）。由于 angular-ui 的引导弹出框默认情况下不允许自定义 html 或数据绑定，因此我复制了他们的工具提示/弹出框.provider，并.directive努力根据我的需要对其进行自定义。

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

第二个问题：可以设置双向数据绑定，这样我就不必手动设置了scope.$parent.$parent.item吗？

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


让我们一目了然对原始版本进行了哪些更改tooltip.js：

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

4

1 回答 1

21

这是工作的小插曲

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

我的方法是不要删除工具提示，只需通过 CSS 的显示属性控制它。

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

我只是更新了plunker。

第二个实际上只是使其与父范围链接。但是，它将使用我的方法创建一个子范围。我认为您也可以使用手表来做到这一点。

于 2013-07-11T20:21:51.440 回答