我试图写一个指令加载一个部分的html文件,编译它的范围&将其用作Bootstrap Popover内容。
但是,我坚持一个非常基本的步骤,在popover范围上编写一个hide()方法,以便我可以使用ng-click = hide()轻松地关闭它。
这已经解决了现在正在覆盖其他问题;-)。
更新:抢救救援:http://plnkr.co/edit/QH3NQh?p=preview
.directive('uiPopover',['$compile','$http',function($compile,$http) { return { restrict: 'A',scope: { hide: '&hide' // did not understand what is this },link: function postLink(scope,element,attr,ctrl) { console.warn('postLink',arguments,this); // scope is the anchor scope scope.name = "Hello"; // Using {{name}} is working scope.hide = function() { // Using ng-click="hide()" is not working :( console.log('in'); element.popover('hide'); } $http.get(attr.uiPopover).success(function(data) { element.popover({ content: $compile(data)(scope),// popover content will get a new scope that I need to put hide() on. html: true }); }); } } }]);
解决方法
见
this google group thread,特别是
Andy’s fiddle。 很难看出,popover小部件/组件创建一个新的DOM元素,它放置在ui-popover指令的范围之外。