Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 带双向数据绑定的角度UI引导自定义工具提示/弹出框_Angularjs_Angularjs Directive_Angular Ui Bootstrap - Fatal编程技术网

Angularjs 带双向数据绑定的角度UI引导自定义工具提示/弹出框

Angularjs 带双向数据绑定的角度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: 要查看

我正在我当前的项目中使用,我需要一个popover,允许用户对给定元素采取一些操作(重命名/编辑/删除/等等)。由于angular ui的引导弹出窗口默认情况下不允许自定义html或数据绑定,因此我复制了它们的工具提示/popover
.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中看到这一行:
,我正在尝试将数据绑定到obobject
item.title
而不是传递值
{{item.title}
(即隔离作用域
'='
vs
'@'
)。但是我在提供程序中沿
作用域:{title:'='}
添加内容的各种尝试都不起作用。