Question

我正在使用angular-modal-service。我希望将模态体的内容修改为来自用户的自定义输入文本。我的index.html看起来像是：

<head>
<link rel="import" href="notify.html">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<input type="text" ng-model="custom_text" />
<input type="button" value="Click here for notification" ng- click="showNotification()" />
</body>
</html>

我的app.js：

var app = angular.module("someApp", ['angularModalService']);

app.controller("mainController", function($scope, ModalService){
$scope.showNotification = function(){
    document.getElementById('my_text').innerHTML = $scope.custom_text;
    alert($scope.custom_text);
    ModalService.showModal({
      templateUrl: "notify.html",
      controller: "YesNoController"
    }).then(function(modal) {
      modal.element.modal();
      modal.close.then(function(result) {
        $scope.message = result ? "You said Yes" : "You said No";
      });
    });
}

});

app.controller('YesNoController', ['$scope', 'close', function($scope, close) {

  $scope.close = function(result) {
  close(result, 500); // close, but give 500ms for bootstrap to animate
  };

}]);

我的notify.html有：

<div class="modal fade">
  <div class="modal-dialog">
<div class="modal-content">

  <div class="modal-header">
    <button type="button" class="close" ng-click="close(false)" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Yes or No?</h4>
  </div>

  <div class="modal-body">
    <p><span id="my_text"></span></p>
  </div>

  <div class="modal-footer">
    <button type="button" ng-click="close(false)" class="btn btn-default" data-dismiss="modal">No</button>
    <button type="button" ng-click="close(true)" class="btn btn-primary" data-dismiss="modal">Yes</button>
  </div>

</div>

我实际上是试图通过DOM访问控制器来修改控制器中的notify.html模式体。但它给了我错误：无法将属性'innerHTML'设置为null。

我该怎么做？请帮忙。

Answer 1

首先，您应该只使用指令操纵角度DOM。因此，以这种方式访问DOM的方法可能会导致问题，即使它正在运行。

话虽如此。您只需将范围值传递给模态，并使用把手{{custom_text}}

将值直接绑定到模板

更新.showModal传递范围值的方法：

ModalService.showModal({
  templateUrl: "notify.html",
  controller: "YesNoController",
  inputs: {
     'custom_text': $scope.custom_text
  }
}).then(function(modal) {
  modal.element.modal();
  modal.close.then(function(result) {
    $scope.message = result ? "You said Yes" : "You said No";
  });
});

模态HTML：

<div class="modal-body">
     <p><span id="my_text">{{custom_text}}</span></p>
</div>

从父控制器显示Angular Modal中的动态内容

1 个答案: