角度$scope变量未显示在引导模式初始化上

Angular $scope variable not being shown on Bootstrap modal init

本文关键字：模式 初始化 显示 scope 变量 角度      更新时间：2023-09-26

我正在使用带有角度的FullCalendar，到目前为止它运行良好。 但是，当我单击事件时，我会显示一个包含事件信息的模式。 

eventClick : function(event) {
    $scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
    console.log($scope.clickedEvent);
    GetEvent($scope, $scope.clickedEvent, $filter);
    // opening the event modal
    $("#eventModal").modal("show");
    },

这在大多数情况下都有效，但为了显示我的事件，我有这样的行

<td class="col-md-6"><label class="horizontal-table-title">{{clickedEvent.eventStatusID}}</label></td>

而这些都没有填满。 在我的初始调用中，我正在做一个 console.log（），这显示了我的 clickedEvent $scope变量，并显示它填充了事件信息。

我的 GetEvent（） 函数看起来像

function GetEvent($scope, event, $filter) {
    // Init date and time pickers
    InitPickers($scope);
    $scope.submitInfo = angular.copy(event)
    // Converting the event date to a moment.js object for better display
    // Also need to seperate the date and time as it comes in as one string but edited as two
    var eventDate = moment($scope.clickedEvent.eventStartDateAndTime).format('MMMM Do YYYY');
    var eventTime = moment($scope.clickedEvent.eventStartDateAndTime).format('hh:mm a');
    // Modal event info body
    $("#claim-id").text($scope.clickedEvent.attachedClaim.claimId);
    $("#event-date").text(eventDate);
    $("#event-time").text(eventTime);
    // Modal event edit body
    $("#datepicker").attr("value", eventDate);
    $("#timepicker").attr("value", eventTime);
    $("#event-edit-status").val($scope.clickedEvent.eventStatusID);
    $("#event-edit-description").val($scope.clickedEvent.eventDescription);
    $("#event-edit-resource").text($scope.clickedEvent.eventResourceName);
    $("#event-edit-resource-address").text($scope.clickedEvent.eventResourceAddress);
}

我还有一个名为 EventRefresh 的函数，它绑定到一个复选框，该复选框将模式的视图从显示事件更改为能够编辑事件。 

<label>Change View Type:
    <input type="checkbox" ng-model="checkboxModel" ng-click="eventRefresh()">
</label>

哪个调用 GetEvents（）

scope.eventRefresh = function() {
        GetEvent($scope, $scope.clickedEvent, $filter)
    }

一旦检查了这一点，就会显示{{clickedEvent}}中的所有信息。 仅在模态的初始打开时没有任何显示。

正如Charlieftl在上面的评论中指出的那样，我需要使用 

$scope.$apply()

所以我用它包装了我的 GetEvent（） 函数。 我的代码来自

eventClick : function(event) {
    $scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
    console.log($scope.clickedEvent);           
    GetEvent($scope, $scope.clickedEvent, $filter);
    // opening the event modal
    $("#eventModal").modal("show");
},

自：

eventClick : function(event) {
            $scope.clickedEvent = $filter('filter')($scope.events, {eventID: event.id})[0];
            console.log($scope.clickedEvent);
             $scope.$apply(function() {             
                GetEvent($scope, $scope.clickedEvent, $filter);
                // opening the event modal
                $("#eventModal").modal("show");
             });
        },

谢谢查理夫特！

相关文章：