在我的AngularJS控制器中,我调用了我的数据服务方法,该方法进行$http
调用以获取页面显示所需的数据。
appDataService.getById()
.success(function(document) {
vm.document = document;
}
.error(function(e)){});
一切都显示正常,我的大多数弹出框都在切换/点击时正确显示其内容。但是,我遇到了其中一个问题。
<button popover-directive
popover-placement="auto"
popover-content="{{ vm.document.content }}"
popover-label="Click to View Text "
class="btn btn-info btn-xs">
</button>
我检查了HTML并确认popover-content
被赋予了正确的字符串值。但是,当我点击它时,没有发生预期的触发弹出行为,
即。新的<div class="popover fade right in">
没有出现。
如果popover-content
被赋予了popover-content="testing"
等直接值,则popover
可以正常工作并在点击时显示内容。
我强烈怀疑这是由于我的数据获取的异步行为;我的数据没有及时返回,以便popover
正确初始化。
显然,我的popover指令正在运行,我不认为问题在于它,但为了完整的图片,我提供了如下的popover指令:
function popoverDirective ($document) {
return {
restrict: 'A',
template: '<span>{{label}}</span>',
link: function (scope, element, attrs) {
scope.label = attrs.popoverLabel;
$(element).popover({
trigger: 'click',
html: true,
content: attrs.popoverContent,
placement: attrs.popoverPlacement
});
}
};
}
任何解决方案?谢谢!
答案 0 :(得分:1)
您是否考虑过使用promises而不是直接从服务返回?这里的目标是你的函数可以立即返回并不重要,因为当异步值可用时,promise将更新为包含该值。
您可以更新服务本身以使用承诺,如果成功则使用值解析promise,或者如果出现错误则拒绝它。在此函数的接收方,当承诺以某种方式解决时,范围上的值将更新。
答案 1 :(得分:1)
由于指令属性是内插的,请考虑将其更改为:
<button popover-directive
popover-placement="auto"
popover-content="{{vm.document.content}}" <!-- Change at this line -->
popover-label="Click to View Text "
class="btn btn-info btn-xs">
</button>
此外,您需要注册观察者,因为vm.document.content
是通过承诺解决的:
function popoverDirective ($document) {
return {
restrict: 'A',
template: '<span>{{label}}</span>',
link: function (scope, element, attrs) {
function initPopover() {
scope.label = attrs.popoverLabel;
// Make sure to remove any popover before hand (please confirm the method)
$(element).popover("destroy");
$(element).popover({
trigger: 'click',
html: true,
content: attrs.popoverContent,
placement: attrs.popoverPlacement
});
}
attrs.$observe("popoverContent", initPopover);
}
};
}
注意如果您使用的是Bootstrap,请删除bootstrap.min.js
,您也可以删除jQuery。 Angular UI团队已移植Bootstrap Javascript以支持Angular。看看http://angular-ui.github.io/bootstrap