我知道在这个问题上有很多答案,但我尝试了一切,没有任何效果。如果元素弹出工作,我看不到里面的任何内容。
我的最后一次测试: 在我的html模板上:
<div class="momentctrl" ng-controller="ButtonsMomentCtrl">
<div class="btn-group-checkbox">
<button class="btn btn-primary" ng-model="checkModel.daybutton" ng-click="momentChange('daybutton')" type="button" btn-checkbox prevent-default bs-popover items="momentdays", title="Moment of day">Day</button>
<script type="text/ng-template" id="popover_template.html">
<div ng-repeat='momentday in momentdays'>
<label>
<input type='checkbox' ng-model='momentday.isChecked' ng-change='changeMomentDay(momentday)'/> <span class='ng-binding-advancedsearch'>{{momentday.name}}</span>
</label>
</div>
</script>
</div>
</div>
在我的控制器上:
angular.module('my.controllers',['ui.bootstrap'])
.controller('ButtonsMomentCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
$scope.checkModel = {
allbutton:true,
nowbutton: false,
daybutton: false,
tonightbutton: false
};
$scope.momentdays = [
{
name: "All",
id: 0,
isChecked: true,
col: 1
},
{
name: "Morning",
id: 0,
isChecked: false,
col: 1
},
{
name: "Afternoon",
id: 1,
isChecked: false,
col: 1
},
{
name: "Early evening",
id: 1,
isChecked: false,
col: 1
},
{
name: "Evening",
id: 1,
isChecked: false,
col: 1
},
{
name: "Night",
id: 1,
isChecked: false,
col: 1
}
];
$scope.momentChange = function(moment){
console.log("momentChange");
}
$scope.changeMomentDay = function(momentDay) {
console.log("changeMomentDay");
};
}])
我的指示:
angular.module('my.directives', [])
.directive('bsPopover', function($compile, $templateCache) {
console.log("directive bs popover");
var getTemplate = function () {
$templateCache.put('templateId.html', 'This is the content of the template');
return $templateCache.get("myPopoverTemplate.html");
}
return {
restrict: "A",
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
var popOverContent;
var html = getTemplate();
popOverContent = $compile(html)(scope);
console.log("popOverContent = "+popOverContent);
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
element.popover(options);
},
scope: {
title: '@',
items: '='
}
};
});