Question

我创建了一个自定义指令来显示ui.bootstrap模式，我无法使用我想要的值填充对话框。我不明白为什么它不起作用。我检查了其他问题和帖子，但我找不到适合我案例的例子。

我创建了一个带有类似版本的真实代码的plunker来显示问题。在示例中，我使用一个按钮来启动模式，但在我的应用程序中，当满足某些条件时，我通过代码执行此操作。这是链接http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ

基本上我有一个指令：

var app = angular.module('app', ['ui.bootstrap']);
app.directive('revModal', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      id: "@",
      title: "@",
      size: "@",
      bodyMessage: '@',
      acceptButton: '@',
      dismissButton: '@'
    },
    controller: function($scope, $modal) {
      $scope.title = $scope.title ? $scope.title : "Alert";
      $scope.size = $scope.size ? $scope.size : "sm";
      $scope.acceptButton = $scope.acceptButton ? $scope.acceptButton : "OK";
      $scope.dismissButton = $scope.dismissButton ? $scope.dismissButton : "Cancel";

      $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl: 'modalAlert.html',
          animation: true,
          backdrop: true,
          windowClass: 'app-modal-window',
          size: $scope.size,
          resolve: {
            acceptButton: $scope.acceptButton,
            dismissButton: $scope.dismissButton
          }
        });

        modalInstance.result.then(function() {}, function() {
          console.log('Modal dismissed at: ' + new Date());
        });
      };
    },
    link: function($scope, element) {
      element[0].open = function() {
        return $scope.openModal();
      }
    }
  }
});

在指令中我也尝试使用函数解析值，但它也没有工作。

 resolve:{
     dismissButton: function(){return $scope.dismissButton}
     ...
    }

指令模板如下，我的问题是花括号内的值不会被替换。链接ng-click功能的逻辑尚未完成。

<div class="modal-header">
      <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
      {{bodyMessage}}
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="acceptModal()">{{acceptButton}}</button>
      <button class="btn btn-warning" ng-click="dismissModal()">{{dismissButton}}</button>
    </div>

要使用此指令，我只需在html中插入以下标记：

<div ng-controller="TimeRangeModalController">
    <rev-modal id="timeRangeModal" title="test" accept-button="acepto" dismiss-button="calcelo" body-message="cuerpo"></rev-modal>
</div>

打开模态的控制器是：

var app = angular.module('app');
app.controller('TimeRangeModalController', function($scope, $document) {

  $scope.open= function(modalId){
      if (undefined !== modalId) {
      var modal = $document[0].getElementById(modalId);
      if (null !== modal) {
        modal.open();
      } else {
        console.error('DOM element with id ' + 'modalId' + 'does not exist');
      }
    }
  }
});

有关如何解析填充模态的值的任何建议？谢谢和问候，Daniela。

Answer 1

最后我发现了这个问题，我错过了在modalInstance中设置范围。最终的开放模态函数将是：

 $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl: 'modalAlert.html',
          animation: true,
          backdrop: true,
          windowClass: 'app-modal-window',
          size: $scope.size,
          scope:$scope
        });

另请注意，resolve子句不需要它。我已更新了Plunkr http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ

自定义模态指令中的属性未解析

1 个答案: