如何获得模态定义的angularjs的值

I want to get the values updated by the user and paste it in the text area of a modal. But it's returning undefined. I am unable to sort out why. Here is the code.

我想获取用户更新的值并将其粘贴到模态的文本区域中。但它返回未定义。我无法理清为什么。这是代码。

$scope.details=[];
$scope.addDetails=function() {
    $scope.details.push({
        Title: $scope.Details_Title,
        meta_chars: $scope.Details_metaChars,
        version: $scope.Details_version,
        Auth_name: $scope.Details_AuthName,
        copyRights: $scope.Details_copyRights
    });
}

$scope.genrate_HTML=function() {
    document.getElementById("createdHTML").value=$scope.details;
}

here is the html

这是html

<div ng-controller="GenrateHTML">//name of the controller
    <button  ng-click="genrate_HTML();toggleModal()" class="btn btn-success btn-sm" id="btnGenerateHTML">Generate HTML </button>
    <modal title="Enter Document Details" visible="showModal" >
        <!--<div ng-controller="GenrateHTML">-->
        <textarea contenteditable="true" type="text" id="createdHTML" name="HTML_content" placeholder="Title" style="margin-top:10px" class="form-control" ></textarea>
        <button class="btn btn-success btn-sm" data-dismiss="modal" style="margin-top:10px;margin-left:520px;" ng-click=" savefile()">Save</button>
    </modal>
</div>

toggleModal() displays the modal, savefile() save the file on local machine, they are working fine. But I am not sure why the textarea returns undefined. I have tried pop(), value(), it returns undefined.

toggleModal()显示模态,savefile()将文件保存在本地机器上,它们工作正常。但我不确定为什么textarea返回undefined。我试过pop(),value(),它返回undefined。

1 个解决方案

#1

From what I understand, you're trying to have a field that is updated by the user, 'textarea' in your example, and be accessible by Javascript.

根据我的理解,您正在尝试使用由用户更新的字段,在您的示例中为“textarea”,并且可以通过Javascript访问。

If this is the case, then as mentioned by Scott in as one of the comments to your question, you may find it beneficial to use Angular's 'ng-model' tag attribute to bind the HTML field to the to Angular controller.

如果是这种情况,那么正如Scott所提到的那样,对你的问题的评论之一,你可能会发现使用Angular的'ng-model'标签属性将HTML字段绑定到Angular控制器是有益的。

An example of this is shown at AngularJS's documentation at the bottom of the page.(https://docs.angularjs.org/api/ng/directive/ngModel)

AngularJS在页面底部的文档中显示了这方面的一个示例。(https://docs.angularjs.org/api/ng/directive/ngModel)

Notice that in the example they are using $scope, but you can easily use a variable inside the controller. To do this, you can use the following code as a reference:

请注意,在示例中,它们使用$ scope,但您可以轻松地在控制器内使用变量。为此,您可以使用以下代码作为参考:

app.js

(function(angular) {
  'use strict';
angular.module('getterSetterExample', [])
  .controller('ExampleController', [function() {
    //assuming there is a $scope.details that contains the necessary data
    this.details = $scope.details
  }]);
})(window.angular);

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngModel-getter-setter-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
  <script src="app.js"></script>



</head>
<body ng-app="getterSetterExample">
  <div ng-controller="ExampleController as exampleCtrl">
  <form name="userForm">
    <label>Name:
      <input type="text" name="userName"
             ng-model="exampleCtrl.details"
             ng-model-options="{ getterSetter: true }" />
    </label>
  </form>
  <pre>user.name = {{exampleCtrl.details}}</pre>
</div>
</body>
</html>

#1