Geek Answers Handbook

Pass and get the value of a DOM element in an Angular JS module

I am really new to Angular JS

I have one html page that loads a js file like this

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

the contents of this file (adf-widget-iframe.min.js) are shown below

 ! 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);

In the above code, I need to get the value from the html page, and you need to enter the URL instead, as shown in the cone (I commented there).

can someone help me how to put text field data in url place?

My own html file

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

Its my control panel GUI, Example:

 https://github.com/angular-dashboard-framework/adf-dynamic-example
+7
javascript jquery angularjs angularjs-directive
source share
1 answer

If I understand the question correctly, we are trying to pass the URL of the current page when adding a new iframe .

If the above is correct, here is my solution:

  • Entering $location in the controller
  • Get the absolute path of the current page: $location.$$absUrl
  • Use absolute path value in $templateCache

You can use the URL string as a placeholder for input or as an input value. If it is used as an input value, the iframe is instantly created, as it should be null in the original design

In the GUI, it will look something like this: iframe dialogbox

Content 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);

Remember to actually import the undominated file into index.html :

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

More articles:


All Articles