在Angular JS Module中传递和获取DOM元素值

我是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 

       

网上收集的解决方案 "在Angular JS Module中传递和获取DOM元素值"

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

如果以上是真的,这是我的解决scheme:

  • $location注入到控制器中
  • 获取当前页面的绝对path: $location.$$absUrl
  • $templateCache使用绝对path值

您既可以使用URLstring作为占位符input,也可以作为input值。 如果它被用作input值,则iframe被立即创build,因为通过原始devise它应该是空的

在GUI中,它将看起来像这样: iframe对话框

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>