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

【问题标题】：Attributes in custom modal directive not resolved自定义模式指令中的属性未解析
【发布时间】：2015-07-29 04:47:25
【问题描述】：

我创建了一个自定义指令来显示 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>

打开modal的控制器是：

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');
      }
    }
  }
});

关于我应该如何解决填充模态的值的任何建议？谢谢和问候，丹妮拉。

【问题讨论】：

标签： angularjs angularjs-directive modal-dialog angular-ui-bootstrap

【解决方案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

【讨论】：