在AngularJS控制器中编译html中的表达式答案

【问题标题】：Compiling expression in html in AngularJS controller在AngularJS控制器中编译html中的表达式
【发布时间】：2020-06-12 10:29:03
【问题描述】：

我从 AngularJS 控制器绑定 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

   }]
});

当模态显示时，静态文本显示，但表达式没有编译。

问题

如何在向用户显示之前在控制器中编译表达式？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

$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;
   }]
});

【讨论】：