带有嵌入式指令的 Angular Bootstrap 模态——无法获得价值？

Question

我有一个非常简单的自定义指令，它提供了一个输入数值的表单。该指令嵌入在需要时触发的模式对话框中。虽然我可以通过模式将数据传递到对话框中，但是当用户单击“确定”时，我无法将输入到指令内输入元素中的数据退回。我想这与指令的范围有关，因为我使用的是隔离范围，但是我在范围部分用“=”标记了名称，所以我不确定出了什么问题。

这里是证明问题的 plunker。 Plunker example

    var app = angular.module('plunker', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);


app.controller('MainCtrl', function($scope, $uibModal, $log, $document) {
  var self = this;
  var $ctrl = self;
  $ctrl.modalresult = "no result";
  $ctrl.name = 'World';
  $ctrl.myvalue = "-99";



  $ctrl.openGetConstantDialog = function(varname, parentSelector, size) {
    var parentElem = parentSelector ?
      angular.element($document[0].querySelector(parentSelector)) : undefined;
    $ctrl.modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      template: `<get-numeric-dialog title="Define a New Constant" 
                 prompt="Enter a value for constant"  
                 varname="${varname}" placeholder="Enter a numeric value">
                 </get-numeric-dialog>
                 <div class="modal-footer"> 
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok(myvalue)">OK</button> 
                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
                </div>`,
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: 'sm',
      appendTo: parentElem
    });
    $ctrl.modalInstance.result.then(function(value) {
        $ctrl.modalresult = $ctrl.myvalue;
        console.log("modal instance returned value: ", $ctrl.myvalue);
      },
      function() {
        $ctrl.modalresult = "no value returned"
      }
    );
  }
});

app.controller('ModalInstanceCtrl', function($uibModalInstance, $scope) {
  var $ctrl = this;
  $ctrl.value = undefined;
  $ctrl.ok = function() {
    $uibModalInstance.close($ctrl.newValue);
  };
  $ctrl.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

app.directive('getNumericDialog', [function() {
  return {
    templateUrl: 'get_numeric_dialog.html',
    restrict: 'E',
    scope: {
      title: '@',
      prompt: '@',
      varname: '@',
      placeholder: '@',
      myvalue: '='
    }
  };
}]);

这是指令模板：

<div class="modal-header">
<h5 class="modal-title" id="modal-title">{{title}}</h5> 
</div>
<div class="modal-body" id="modal-body">
<p>{{prompt}} '<span class="bold">{{varname}}</span>'</p>
<input type='text' placeholder='{{placeholder}}' ng-model="value"><br>

</div>

Answer 1

几天后我设法让这个工作起来，不像上面那样结构化，因为嵌入式指令最终不值得额外的复杂性，但万一其他人遇到问题，下面的解决方案。

var app = angular.module('plunker', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope, $uibModal, $log, $document) {

  var self = this;
  var $ctrl = self;
 $scope.modalresult = "no result";
 $scope.openModal = function() {
    var getConstantTemplate = function(title, prompt, buttonCaption, varName) {
      let template = `<div class="modal-header">
      <h5 class="modal-title" id="modal-title">${title}</h5>
      </div>
      <div class="modal-body" id="modal-body">
      <p>Value for constant '<span class="bold">${varName}</span>':</p>
      <input type='text' varname="weeks" placeholder='Enter a number' ng-model="$ctrl.newValue">
      <br>
      </div>
      <div class = "modal-footer" id="modal-footer">
          <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">${buttonCaption}</button>
          <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
      </div>`
      return template;
    }
    var modalInstance = $uibModal.open({
      animation: true,
      template: getConstantTemplate("New Constant", "a", "Save", "months"),
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: 'sm'
    });
    modalInstance.result.then(function(result) {
      console.log('modalInstance got result ' + result);
      $scope.modalresult = result;

    });
  };
});

app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
  var $ctrl = this;
  $ctrl.prompt = "Enter a value for constant ";
  $ctrl.varname = "weeks";
  $ctrl.placeholder = "Enter a number";
  $ctrl.ok = function() {
    console.log("OK has been called with newValue " + $ctrl.newValue);
    $uibModalInstance.close($ctrl.newValue);
  };
  $ctrl.cancel = function() {
    console.log("Cancel has been called");
    $uibModalInstance.close("model closed cancelled");
  };

})

 

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker </title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <script src="app2.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="plunker">
  <div ng-controller="MainCtrl as ctrl">

    <button ng-click="openModal()">Open the modal please</button>
    <br>
    <br>
    <p>modalresult = {{modalresult}} </p>

  </div>
</body>

</html>