如何获取模态定义的angularjs

时间:2015-05-13 18:14:03

标签: angularjs angularjs-scope

我希望用户更新值并将其粘贴到模态的文本区域中。但它正在返回undefined。我无法理清为什么。 这是代码。

$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;
}

这是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()显示模式,savefile()将文件保存在本地计算机上,它们工作正常。但我不确定为什么textarea返回undefined。我尝试了pop()value(),它返回undefined

1 个答案:

答案 0 :(得分:0)

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

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

此示例显示在页面底部的AngularJS文档中。(https://docs.angularjs.org/api/ng/directive/ngModel

请注意,在示例中,它们使用$ 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>