Angularjs 带双向数据绑定的角度UI引导自定义工具提示/弹出框
我正在我当前的项目中使用,我需要一个popover,允许用户对给定元素采取一些操作(重命名/编辑/删除/等等)。由于angular ui的引导弹出窗口默认情况下不允许自定义html或数据绑定,因此我复制了它们的工具提示/popoverAngularjs 带双向数据绑定的角度UI引导自定义工具提示/弹出框,angularjs,angularjs-directive,angular-ui-bootstrap,Angularjs,Angularjs Directive,Angular Ui Bootstrap,我正在我当前的项目中使用,我需要一个popover,允许用户对给定元素采取一些操作(重命名/编辑/删除/等等)。由于angular ui的引导弹出窗口默认情况下不允许自定义html或数据绑定,因此我复制了它们的工具提示/popover.provider和.directive,以便根据我的需要对其进行自定义 主要问题:关闭并重新打开弹出窗口后,ng click绑定将丢失 次要问题:是否可以设置双向数据绑定,以便我不必手动设置范围。$parent.$parent.item Plunker: 要查看
.provider
和.directive
,以便根据我的需要对其进行自定义
主要问题:关闭并重新打开弹出窗口后,ng click绑定将丢失
次要问题:是否可以设置双向数据绑定,以便我不必手动设置范围。$parent.$parent.item
Plunker:
要查看对原始
tooltip.js所做的更改,请执行以下操作:
- popover
指令
是修改最多的指令:
指令('iantooltipPopup',函数(){
返回{
限制:'E',
替换:正确,
范围:{mediaid:'@',标题:'=',内容:'@',位置:'@',动画:'&',等参:'&'},
templateUrl:'popover.html',
链接:函数(范围、元素、属性){
scope.showForm=false;
scope.onRenameClick=函数(){
log('onRenameClick()');
scope.showForm=true;
};
scope.onDoneClick=函数(){
console.log('标题更改为:'+scope.Title);
scope.showForm=false;
scope.$parent.$parent.item.title=scope.title;
作用域$parent.hide();
};
}
};
})
- 工具提示
.provider
仅在此处更改,以便在标题
字段上实现双向绑定:
var模板=
''+
'';
我非常感谢任何帮助,我觉得在开始使用Angular时,编译的指令和提供程序似乎是很大的心理障碍。我一直在尝试找出并操作这个指令,以便从中学习,就像实际需要组件本身一样。以下是工作原理
问题来自原始工具提示。关闭后,它会删除工具提示,但下次打开时,它不会再次编译工具提示。(工具提示触发器的链接功能仅在第一次运行。)
我的方法是不删除工具提示,只通过CSS中的显示属性来控制它
我也作了一个简短的发言来讨论这个问题
我只是更新了plunker
第二个问题实际上只是使其与父范围相链接。但是,它将使用我的方法创建一个子范围。我想你也可以用watch来解决这个问题。至于第二个问题,我想这里隔离范围上的视频可能会对你有所帮助:完全公开不是垃圾邮件,但我以前和这个家伙一起工作过,他通过视频比面对面更具社交性,但从我所看到的他的作品来看,他是非常聪明的。第二个问题——不管你的输入形式有多深,嵌套对象<代码>标题:{value:{inputValue:''}}代码>。类似这样的问题-对于第一个问题,需要调试大量代码:(@shaunhusain我看过他的视频,这些视频对我的入门非常有帮助,但没有一个示例(除非我错过了一个)深入研究嵌套/编译指令。@rGil我知道这是很多代码(我尝试尽可能地修剪)。但我希望angular ui的一个成员能够理解这一点,因为这只是他们工作中的一个小调整。当然。这是您添加的一个很酷的组件。当您开始使用它时,我相信许多其他人都会使用它。谢谢您!对于第二个问题,您可以在index.html中看到这一行:
,我正在尝试将数据绑定到obobjectitem.title
而不是传递值{{item.title}
(即隔离作用域'='
vs'@'
)。但是我在提供程序中沿作用域:{title:'='}
添加内容的各种尝试都不起作用。