我在我目前的项目中使用
angular-ui-bootstrap,而且我需要一个popover,这将允许用户对给定的元素(重命名/编辑/删除/ etc …)采取一些行动.由于angle-ui的引导弹出窗口默认不允许自定义html或数据绑定,所以我已经复制了他们的工具提示/ popover .provider和.directive,以便根据自己的需要进行自定义.
主要问题：弹出窗口关闭并重新打开后,ng-click绑定将丢失.
次要问题：可以设置双向数据绑定,以便我不必手动设置范围$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只是在这里改变,以努力获得双向绑定到标题字段上工作：
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时似乎是很大的精神障碍.我一直在试图弄清楚和操纵这个指令,所以我可以从中学习,就像实际需要组件本身一样.
