Question

我用模态窗口构建了某种日期选择器。我的代码有奇怪的问题。我的场景是这样的，用户选择一个范围：开始日期和结束日期，然后显示一个弹出窗口。我们展示了各种数据，可以通过无线电盒选择。收音机盒用ng-model连接：

<td><input class="dga_radio" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga" />
                    </td>

显然我想把索引放到selectedDga这是一个范围变量。但是我看到根本没有值进入该变量。我在这里添加完整的代码：

指令：

angular.module('directives', [])
        .directive('datepicker', ['$timeout', 'dataFactory', function ($timeout, dataFactory) {
            // Runs during compile
            return {
                scope: {
                    id: '@',
                    "class": '@',
                    onSelectStartDate: '&',
                    onSelectEndDate: '&',
                    onSelectGoMode: '&',

            },
            restrict: 'E',
            templateUrl: 'Templates/datepicker.html',
            replace: true,
            link: function ($scope, iElm, iAttrs, controller) {
                $scope.selectedDga;
                var startDate, endDate;
                $scope.selectStartDate = function (time) {
                    if (angular.isFunction($scope.onSelectStartDate())) {
                        $scope.onSelectStartDate()(time);
                    }

                    console.log('$scope.startDate', $scope.startDate);
                }
                $scope.selectEndDate = function (time) {
                    if (angular.isFunction($scope.onSelectEndDate())) {
                        $scope.onSelectEndDate()(time);
                    }

                    console.log('$scope.endDate', $scope.endDate);
                }
                //define blackout and close click callbacks.
                $("#blackout, .close").click(function () {
                    $("#blackout").removeClass("visable");
                    $("#popup").removeClass("visable");
                });

                $("#GoBtn").click(function () {
                    if (angular.isFunction($scope.onSelectGoMode())) {
                        $scope.onSelectGoMode()();
                    }

                    var wmessage_container  = $('#warning-message');
                    var wmessage            = $('#warning-message > #wmessage');
                    startDate               = $("#datepicker-start").val();
                    endDate                 = $("#datepicker-end").val();
                    console.log('reach here!');
                    if ((angular.isDefined(startDate) && startDate != '') && (angular.isDefined(endDate) && endDate != '')) {
                        console.log('case 1');
                        //check if startDate and endDate are valid
                        if (startDate > endDate) {

                            wmessage_container.show();
                            wmessage.text('start date and end date values are invalid!');
                            console.log('startDate is bigger than end date');
                        }
                        else {
                            var promise = dataFactory.getDGAList(startDate, endDate);

                            promise.then(function successCallback(response) {
                                // this callback will be called asynchronously
                                // when the response is available
                                console.log('success callback');
                                console.log('response.status ', response.status);
                                console.log('response.data', response.data);
                                console.log('response.headers', response.headers);
                                console.log('response.config', response.config);
                                if (response.status == 200) {
                                    $scope.collection = response.data;
                                }

                            }, function errorCallback(response) {
                                // called asynchronously if an error occurs
                                // or server returns response with an error status.
                                console.log('promise callback');
                                console.log('response.data', response.data);
                                console.log('response.headers', response.headers);
                                console.log('response.config', response.config);
                            });


                            wmessage.text('');
                            wmessage_container.hide();
                        }

                        //call DataFactory service.
                    } else {

                        wmessage_container.show();
                        if ((startDate == '' || !angular.isDefined(startDate)) && (endDate == '' || !angular.isDefined(endDate)))
                        {
                            console.log('case 2');
                            wmessage.text('start date and end date are required !');
                        }
                        else if (startDate == '' || !angular.isDefined(startDate)) {
                            console.log('case 3');
                            wmessage.text('start date is required !');
                        } else {
                            console.log('case 4');
                            wmessage.text('end date is required !');
                        }

                    }

                    console.log('startDate', startDate);
                    console.log('endDate', endDate);

                    $("#blackout").addClass("visable");
                    $("#popup").addClass("visable");
                });

                var actions = [$scope.selectStartDate, $scope.selectEndDate];
                $(".date-wrapper").each(function (index) {
                    console.log('directive index', index);
                    console.log('actions:', actions);
                    $input = $(this).find('input');
                    $btn = $(this).find('.calendar');

                    console.log('input', $input[0]);
                    console.log('btn', $btn[0]);
                    var counter = 0;
                    var updateTime = $scope.selectDate;

                    $input.attr('type', 'text');
                    var pickerStart = new Pikaday({
                        field: $input[0],
                        trigger: $btn[0],
                        container: $(this)[0],
                        format: 'DD/MM/YYYY',
                        firstDay: 1,
                        onSelect: actions[index]
                    });
                    $btn.show();
                    counter++;
                });

            }
        };
    }]);

模板：

<div id="{{id}}" class="{{class}}">
   <div id="date-start-wrapper" class="date-wrapper">
        <label for="datepicker-start" class="datepicker-lbl">From:</label>
            <div class="fieldWrapper">
                <input id="datepicker-start" type="date" placeholder="Select date" />
                <a class="calendar"></a>
            </div>
    </div>
    <div id="date-end-wrapper" class="date-wrapper">
        <label for="datepicker-end" class="datepicker-lbl">To:</label>
        <div class="fieldWrapper">
            <input id="datepicker-end" type="date" placeholder="Select date" />
            <a class="calendar"></a>
        </div>       
    </div>
    <button id="GoBtn" class="btn btn-primary btn-md">GO</button>
    <div id="blackout"></div>
    <div id="popup">
        <span class="close"></span>
        <div id="content">
            <table cellpadding="10" cellspacing="10" border="1">
                <tr>
                    <th></th>
                    <th>Id</th>
                    <th>Source</th>
                    <th>IsValid</th>
                    <th>Sampling Date</th>
                </tr>

                <tr ng-repeat="item in collection">
                    <td><input class="dga_radio" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga" />
                    </td>
                    <td ng-repeat="(key,value) in item">
                        {{value}}
                    </td>
                </tr>
            </table>
            selected_dga:{{selectedDga}}
        </div>
        <div id="warning-message">
            <img src="../images/sign.png" width="32px" height="32px" />
            <span id="wmessage" ></span>
        </div>
        <button id="okbtn" class="btn btn-success btn-md">ok</button>
        <button id="cancelbtn" class="btn btn-danger btn-md">cancel</button>
    </div>
</div>

如果我在一个简单的指令中尝试这个，那么一切都像魅力一样，但在我当前的指令中，我没有得到任何价值。

调用指令是这样的：

<datepicker id="thedatepicker" class="dates-wrapper" on-select-start-date="onSelectedStartDate" on-select-end-date="onSelectedEndDate" on-select-go-mode="Go" ></datepicker>

Answer 1

答案很简单：我不应该在ng-model中使用原语。

Answer 2

仅在@Brk答案中添加示例：

这只是更改对象的原语。就我而言：

在控制器中：

$scope.name = 'Any Name' --> $scope.person = { 'name' : 'Any Name' };

在指令中：

ng-model="name" --> ng-model="person.name"

那样简单！

ng-model没有在指令模板中更新

2 个答案: