Question

我正在尝试从指令访问控制器的变量，但变量未定义，我无法弄清楚原因。该变量在页面加载时是立即未定义的，我猜是因为在控制器初始化之前加载了html，但我不明白在加载html并调用renderTimetable之后它是如何未定义的。

angular.module('app')
       .directive('timetable',

function() {
    return {
        restrict: 'E',
        scope: {
            bookings: '=',
            timetableDate: '='
        },
        link: function(scope, elem, attrs) {

                scope.$watch('bookings', function(updatedBookings, unupdatedBookings) {
                    if (typeof updatedBookings !== 'undefined') {
                        console.log(scope.timetableDate); // undefined
                        scope.renderTimetable(updatedBookings);
                    }
                });

                // bookings

                scope.renderTimetable = function(planes) {

                    console.log(scope.timetableDate); // undefined
                }
            };
        }
    };
});

该指令具有设置控制器范围的属性：

<timetable bookings="bookings" timetableDate="timetableDate"></timetable>

timetableDate模型如此绑定：

<input readonly datepicker ng-model="timetableDate" value="timetableDate" />

在控制器中，变量立即设置，console.log按预期获取日期字符串：

...
    function($scope, $http, $location, $interval) {
        $scope.bookingModalVisible = false;
        $scope.timetableDate = new Date().toDateString();
        console.log(timetableDate); // NOT undefined

Answer 1

更改

<timetable bookings="bookings" timetableDate="timetableDate"></timetable>

到

<timetable bookings="bookings" timetable-date="timetableDate"></timetable>

来自Angular docs：

Angular规范化元素的标记和属性名称以确定哪些元素匹配哪些指令。我们通常会提到它们区分大小写的camelCase规范化名称的指令（例如 ngModel）。但是，由于HTML不区分大小写，我们参考 DOM中的指令通过小写形式，通常使用 DOM元素上的破折号分隔属性（例如ng-model）。

指令的孤立范围变量未定义

1 个答案: