为什么打开模式时选择标签不更新？

Question

我有一个模态指令。问题是，当我尝试打开已填充数据的模式时，选择标签直到我第二次打开模式时才会更新。

我正在使用 angular 和 materializecss 。请注意，所有其他字段都有效，但选择直到我第二次打开模式时才起作用，但在日志中始终显示范围的数据已更新，因此问题是选择未按时呈现或类似情况。

用填充数据打开模态的 JS

$scope.update = function (customer) {
    console.log("selected type id: "+$scope.selectedIdType)

    $scope.isUpdating = true;
    updateView()
    $scope.newCustomer = customer;
    var resultSplitTin = customer.tin.split('-');
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : '');
    $scope.selectedIdType = resultSplitTin[0];
    console.log($scope.inputId)
    $scope.inputPhone = customer.phones[0];
    $scope.newCustomer.zone = customer.zone;
    console.log("selected type id after: "+$scope.selectedIdType)

    for (var i = 0; i < $scope.zones.length; i++) {
       // console.log(customer.zone + " == " + $scope.zones[i].code);
        if (customer.zone == $scope.zones[i].code) {
            $scope.newCustomer.zone = $scope.zones[i];
        }
    }


    $('#modalCustomer').openModal();
    $('#selectedTaxInput').material_select();
    $('#selectedZoneInput').material_select();
    $('#selectedIdInput').material_select();


};

模态 HTML（所有输入更新，但没有选择）

<form class="col s12" >
            <div class="row">
                <div class="input-field col s4">
                    <select id="selectedIdInput" ng-options="id for id in idTypes" ng-model="selectedIdType">
                        <option value="" disabled selected>Elije una opci&oacute;n</option>
                    </select>
                    <label>Tipo</label>
                </div>
                <div class="input-field col s8">
                    <input id="identification" type="text" class="validate" ng-class="{'valid': inputId.length > 0}"
                           ng-model="inputId">
                    <label for="identification"
                           ng-class="{'active': inputId.length > 0}">Identificaci&oacute;n</label>
                </div>
            </div>
            <div class="input-field col s12">
                <input id="name" type="text" class="validate" ng-class="{'valid': newCustomer.name.length > 0}"
                       ng-model="newCustomer.name">
                <label for="name" ng-class="{'active': newCustomer.name.length > 0}">Nombre</label>
            </div>
            <div class="input-field col s12">
                <input id="telephone" type="text" class="validate" ng-class="{'valid': inputPhone.length > 0}"
                       ng-model="inputPhone">
                <label for="telephone" ng-class="{'active': inputPhone.length > 0}">Tel&eacute;fono</label>
            </div>
            <div class="input-field col s12" >
                <textarea id="address" class="materialize-textarea"
                          ng-class="{'valid': newCustomer.address.length > 0}"
                          ng-model="newCustomer.address"></textarea>
                <label for="address" ng-class="{'active': newCustomer.address.length > 0}">Direcci&oacute;n</label>
            </div>

            <label style="margin-left:10px">Localidad</label>

            <div id="selectedZone" class="input-field col s12 l12" input-field>
                <select id="selectedZoneInput" ng-model="newCustomer.zone"
                        ng-options="item.code as item.name for item in zones track by item.code"
                        ng-change="showSelected()" watch>
                    <option value="" disabled selected>Elije una opci&oacute;n</option>
                </select>
            </div>
        </form>

修复

$scope.update = function (customer) {
    console.log("selected type id: "+$scope.selectedIdType)

    $scope.isUpdating = true;
    updateView()
    $scope.newCustomer = customer;
    var resultSplitTin = customer.tin.split('-');
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : '');
    $scope.selectedIdType = resultSplitTin[0];
    console.log($scope.inputId)
    $scope.inputPhone = customer.phones[0];
    $scope.newCustomer.zone = customer.zone;
    console.log("selected type id after: "+$scope.selectedIdType)

    for (var i = 0; i < $scope.zones.length; i++) {
       // console.log(customer.zone + " == " + $scope.zones[i].code);
        if (customer.zone == $scope.zones[i].code) {
            $scope.newCustomer.zone = $scope.zones[i];
        }
    }


    $('#modalCustomer').openModal({
        ready: function(){
            $timeout(function() {
                $('#selectedTaxInput').material_select();
                $('#selectedZoneInput').material_select();
                $('#selectedIdInput').material_select();
            });
        }
    });

};

Answer 1

这是因为您使用 jQuery 打开模式并绑定值，因此 Angular 不知道更改。有一个 digest cycle 的概念，因此 Angular 在模型值更改时更新视图，反之亦然。

但是在这里，您正在使用 jQuery 来修改 Angular 上下文中的数据，因此您需要手动告诉 Angular 发生了一些变化。您可以通过调用 $scope.$apply() 来使用它，但它有一些限制，即如果摘要周期已经在进行中，它可能会失败并引发异常。

所以你可以使用$timeout服务。

$('#modalCustomer').openModal();

// Assuming this selector is the modal's selector
$('#modalCustomer').on('shown.bs.modal', function (e) {
    $timeout(function() {
        $('#selectedTaxInput').material_select();
        $('#selectedZoneInput').material_select();
        $('#selectedIdInput').material_select();
    });
});