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

Question

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

我用我的真实代码的类似版本创建了一个 plunker 来显示问题。在这个例子中，我使用一个按钮来启动模式，但在我的应用程序中，我是在满足某些条件时通过代码来完成的。这是linkhttp://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}
     ...
    }

指令模板如下，我的问题是花括号内的值没有被替换。 link 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');
      }
    }
  }
});

关于如何解析这些值以填充模式有什么建议吗？谢谢和问候，丹妮拉。

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

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

Attributes in custom modal directive not resolved

modal-dialog

angularjs

angularjs-directive

angular-ui-bootstrap