在 Angular JS 模块中传递并获取 DOM 元素值答案

【问题标题】：Pass and get a DOM element value in Angular JS Module在 Angular JS 模块中传递并获取 DOM 元素值
【发布时间】：2016-03-21 02:04:44
【问题描述】：

我是 Angular JS 的新手

我有一个html页面，它会加载一个这样的js文件

<script type="text/javascript" src="components/adf-widget-iframe/dist/adf-widget-iframe.min.js"></script>

该文件 (adf-widget-iframe.min.js) 内容如下所示

! function() {
    "use strict";
    angular.module("adf.widget.iframe", ["adf.provider"]).config(["dashboardProvider", function(e) {
        e.widget("iframe", {
            title: "iframe",
            description: "Embed an external page into the dashboard",
            templateUrl: "{widgetsPath}/iframe/src/view.html",
            controller: "iframeController",
            controllerAs: "iframe",
            edit: {
                templateUrl: "{widgetsPath}/iframe/src/edit.html"
            },
            config: {
                height: "420px"
            }
        })
    }]).controller("iframeController", ["$sce", "config", function(e, r) {
        r.url && (this.url = e.trustAsResourceUrl(r.url))
    }]), angular.module("adf.widget.iframe").run(["$templateCache", function(e) {
        e.put("{widgetsPath}/iframe/src/edit.html", "<form role=form><div class=form-group><label for=url>URL</label> 

<input type=url class=form-control id=url ng-model=config.url placeholder=http://www.example.com>
//Here i need to put url from html page like from a text box.

</div><div class=form-group><label for=url>Height</label> <input type=text class=form-control id=url ng-model=config.height></div></form>"), e.put("{widgetsPath}/iframe/src/view.html", '<div><div class="alert alert-info" ng-if=!config.url>Please insert a url in the widget configuration</div><iframe ng-if=iframe.url class=adf-iframe style="height: {{config.height}}" src={{iframe.url}}></iframe></div>')
    }])
}(window);

在上面的代码中，我必须从 html 页面中获取一个值，并且需要放入 url 的位置，如锥体所示（我已经注释掉了。）

谁能帮助我如何将文本框数据放在 URL 的位置？

这是我的 html 文件

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="dashboard sample app">
    <meta name="author" content="Sebastian Sdorra">

    <title>Dashboard</title>

    <!-- build:css css/sample.min.css -->
    <!-- Bootstrap core CSS -->
    <link href="components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- dashboard style -->
    <link href="components/angular-dashboard-framework/dist/angular-dashboard-framework.min.css" rel="stylesheet">
    <link href="components/adf-widget-clock/dist/adf-widget-clock.min.css" rel="stylesheet">
    <link href="components/adf-widget-iframe/dist/adf-widget-iframe.min.css" rel="stylesheet">
    <style>
    body {
      padding-top: 60px;
    }
    </style>
    <!-- endbuild -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!--[if lte IE 8]>
      <script>
        document.createElement('adf-dashboard');
        document.createElement('adf-widget');
        document.createElement('adf-widget-content');
      </script>
    <![endif]-->

  </head>

  <body ng-app="adfDynamicSample">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container" ng-controller="navigationCtrl as nav">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" ng-click="nav.toggleNav()">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ADF Dynamic Sample</a>
        </div>
        <div collapse="nav.navCollapsed" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li ng-class="nav.navClass('boards/' + item.id)" ng-repeat="item in nav.items | orderBy: title">
              <a ng-href="#/boards/{{item.id}}">{{item.title}}</a>
            </li>
            <li>
              <a style="cursor: pointer;" ng-click="nav.create()">Create</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <ng-view />

    </div>

    <!-- components -->
    <script type="text/javascript" src="components/Sortable/Sortable.min.js"></script>
    <script type="text/javascript" src="components/angular/angular.min.js"></script>
    <script type="text/javascript" src="components/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap.min.js"></script>
    <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="components/angular-dashboard-framework/dist/angular-dashboard-framework.min.js"></script>

    <!-- scripts -->
    <script type="text/javascript" src="scripts/app.js"></script>

    <!-- structures -->
    <script type="text/javascript" src="components/adf-structures-base/dist/adf-structures-base.min.js"></script>

    <!-- clock -->
    <script type="text/javascript" src="components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="components/adf-widget-clock/dist/adf-widget-clock.min.js"></script>

    <!-- github -->
    <script type="text/javascript" src="components/highcharts/adapters/standalone-framework.js"></script>
    <script type="text/javascript" src="components/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="components/highcharts-ng/dist/highcharts-ng.js"></script>
    <script type="text/javascript" src="components/adf-widget-github/dist/adf-widget-github.min.js"></script>

    <!-- iframe -->
    <script type="text/javascript" src="components/adf-widget-iframe/dist/adf-widget-iframe.min.js"></script>

    <!-- linklist -->
    <script type="text/javascript" src="components/adf-widget-linklist/dist/adf-widget-linklist.min.js"></script>

    <!-- markdown -->
    <script type="text/javascript" src="components/showdown/compressed/Showdown.min.js"></script>
    <script type="text/javascript" src="components/angular-markdown-directive/markdown.js"></script>
    <script type="text/javascript" src="components/adf-widget-markdown/dist/adf-widget-markdown.min.js"></script>

    <!-- news -->
    <script type="text/javascript" src="components/adf-widget-news/dist/adf-widget-news.min.js"></script>

    <!-- randommsg -->
    <script type="text/javascript" src="components/adf-widget-randommsg/dist/adf-widget-randommsg.min.js"></script>

    <!-- version -->
    <script type="text/javascript" src="components/adf-widget-version/dist/adf-widget-version.min.js"></script>

    <!-- weather -->
    <script type="text/javascript" src="components/adf-widget-weather/dist/adf-widget-weather.min.js"></script>
  </body>
</html>

它是我参考的仪表板 GUI，我正在使用此仪表板示例

https://github.com/angular-dashboard-framework/adf-dynamic-example

【问题讨论】：

标签： javascript jquery angularjs node.js angularjs-directive

【解决方案1】：

如果我正确理解了问题，我们会在添加新的iframe 时尝试传递当前页面的 URL。

如果以上是真的，这是我的解决方案：

将$location注入控制器
获取当前页面的绝对路径：$location.$$absUrl
在$templateCache 中使用绝对路径值

您既可以使用 URL 字符串作为输入的占位符，也可以作为输入值。如果它用作输入值，iframe 会立即创建，因为按照原始设计它应该为 null

在 GUI 中，它看起来像这样：

adf-widget-iframe.js的内容：

(function(window, undefined) {'use strict';


angular.module('adf.widget.iframe', ['adf.provider'])
    .config(["dashboardProvider", function(dashboardProvider){
        dashboardProvider
            .widget('iframe', {
                title: 'iframe',
                description: 'Embed an external page into the dashboard',
                templateUrl: '{widgetsPath}/iframe/src/view.html',
                controller: 'iframeController',
                controllerAs: 'iframe',
                edit: {
                    templateUrl: '{widgetsPath}/iframe/src/edit.html'
                },
                config: {
                    height: '420px'
                }
            });
    }])
    .controller('iframeController', ["$sce", "config", "$location", function($sce, config, $location){
        config.placeholder = $location.$$absUrl;
        if (config.url){
            this.url = $sce.trustAsResourceUrl(config.url);
        }
    }]);

angular.module("adf.widget.iframe").run(["$templateCache", function($templateCache) {$templateCache.put("{widgetsPath}/iframe/src/edit.html","<form role=form><div class=form-group><label for=url>URL</label> <input type=url class=form-control id=url ng-model=config.url placeholder={{config.placeholder}}></div><div class=form-group><label for=url>Height</label> <input type=text class=form-control id=url ng-model=config.height></div></form>");
$templateCache.put("{widgetsPath}/iframe/src/view.html","<div><div class=\"alert alert-info\" ng-if=!config.url>Please insert a url in the widget configuration</div><iframe ng-if=iframe.url class=adf-iframe style=\"height: {{config.height}}\" src={{iframe.url}}></iframe></div>");}]);})(window);

不要忘记将未缩小的文件实际导入 index.html：

<!-- iframe -->
    <script type="text/javascript" src="components/adf-widget-iframe/dist/adf-widget-iframe.js"></script>

【讨论】：