在弹出窗口内的ng-repeat不能工作angularjs

时间:2016-01-29 09:18:40

标签: angularjs ng-repeat popover

我知道在这个问题上有很多答案,但我尝试了一切,没有任何效果。如果元素弹出工作,我看不到里面的任何内容。

我的最后一次测试: 在我的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: '='
            }
        };
});

0 个答案:

没有答案