gpt4 book ai didi

angularjs - Angular-UI-Bootstrap 自定义工具提示/带有 2 路数据绑定(bind)的弹出框

转载 作者:行者123 更新时间:2023-12-04 00:38:49 25 4
gpt4 key购买 nike

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

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

次要问题 : 可以设置双向数据绑定(bind),这样我就不必手动设置scope.$parent.$parent.item ?

普伦克 : 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仅在此处进行了更改,以使双向绑定(bind)能够在 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 时似乎是很大的心理障碍。我一直在尝试找出并操作这个指令,以便我可以从中学习,就像实际需要组件本身一样。

    最佳答案

    这是工作plunker

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

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

    我也做了一个pull request来讨论这个问题。

    我只是更新了plunker。

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

    关于angularjs - Angular-UI-Bootstrap 自定义工具提示/带有 2 路数据绑定(bind)的弹出框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17600603/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com