angularjs - mwl-calendar 不适用于指令

Question

我在 angularjs 中创建了一个指令来更改我的角度月视图中的文本，但是当我将视图从周切换到月时，它不会显示我的数据。

<script id="customMonthCell.html" type="text/ng-template">
    <div size-elt class="cal-month-day {{day.cssClass}}">
        <span
            class="pull-right"
            data-cal-date
            ng-click="vm.calendarCtrl.dateClicked(day.date)"
            ng-bind="day.label">
        </span>

        <small style="position: absolute; bottom: 10px; left: 5px">{{monthCalendarDayDivWidth}}
            <div style="display:inline-block;margin-bottom: 5px;" ng-repeat="(petitTitle, events) in day.groups track by petitTitle">
                <span ng-if="events.length > 1 && monthCalendarDayDivWidth > 130">               
                    {{events[0].description}}
                </span>
                <span ng-if="events.length > 1 && monthCalendarDayDivWidth <= 130">               
                    {{littleTitle}}
                </span>
            </div>
        </small>
    </div>
</script>



tabs.directive('sizeElt', ['$window', function ($window) {

    return {
        link: link,
        restrict: 'A'
    };

    function link(scope, element, attrs) {
        angular.element($window).bind('resize', function () {
            scope.windowWidth = $window.innerWidth;
            scope.monthCalendarDayDivWidth = element[0].offsetWidth
            scope.$apply();
        });
        angular.element($window).bind('load', function () {
            scope.windowWidth = $window.innerWidth;
            scope.monthCalendarDayDivWidth = element[0].offsetWidth
            scope.$apply();
        });
    }
}]);

这是我加载页面的时候

这是我点击周视图并返回月视图的时候

就像没有定义monthCalendarDayDivWidth但是如果我在切换视图时强制它仍然不起作用

$scope.monthCalendarDayDivWidth = $scope.windowWidth > 1080 ? 140 : 110

标签： angularjscalendar

Answer 1

我修改了我的指令，所以当我在日历中切换视图时，我可以看到数据

tabs.directive('sizeElt', ['$window', function ($window) {

    return {
        link: link,
        restrict: 'A'
    };

    function link(scope, element, attrs) {
        angular.element($window).bind('resize', function () {
            scope.windowWidth = $window.innerWidth;
            scope.monthCalendarDayDivWidth = element[0].offsetWidth
            scope.$apply();
        });

        if (element.offsetWidth !== 0 || element.offsetHeight !== 0) {
            setTimeout(function () {
                scope.windowWidth = $window.innerWidth;
                scope.monthCalendarDayDivWidth = element[0].offsetWidth
                scope.$apply();
            }, 0);
        }
    }
}]);