Question

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

这是证明问题的the子手。 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

几天后，我设法使它开始工作，但结构却不像上面那样，因为嵌入式指令最终不值得增加额外的复杂性，但是如果其他人遇到麻烦，请在下面找到解决方案。

import turtle
my_turtle = turtle.Turtle()
for x in range (0, 4):
    my_turtle.forward(100)
    my_turtle.right(90)
turtle.done()

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

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

1 个答案: