AngularJS controller 中 html 中的编译表达式

Question

我从 AngularJS controller 绑定 html 并在 Bootstraps $uibModal中显示此信息，如下所示：

$scope.phoneNumber = '0111111111';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please contact us on {{phoneNumber}}</p>                     

                </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    controller: ['$uibModalInstance', '$timeout', '$state', function($uibModalInstance, $timeout, $state){

        //LOGIC GOES HERE

   }]
});

当模态显示时，static 文本显示，但表达式未编译。

问题

在显示给用户之前，如何让表达式在 controller 中编译？

Answer 1

您需要将“解决”添加到您的 modalInstance 中，其中包含您想要发送到模态 controller 的内容。 之后，您需要将其作为依赖项传递给模态。

$scope.phoneNumber = '0111111111';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please contact us on {{$ctrl.phoneNumber}}</p>                     
               </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    resolve: {
    phone: function () {
        return $scope.phoneNumber;
      }
    },
    controller: ['$uibModalInstance', '$timeout', '$state', 'phone', function($uibModalInstance, $timeout, $state, phone){

        //LOGIC GOES HERE
        this.phoneNumber = phone;
   }]
});