Menu
I am really new in Angular JS
I have one html page,which loads a js file like this
<script type="text/javascript" src="components/adf-widget-iframe/dist/adf-widget-iframe.min.js"></script>
that file (adf-widget-iframe.min.js) content is given 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 have to get a value from the html page and need to put in the place of url as shown in the cone( i have commented out there.)
can anybody help me to how to put the text box data in the place of URL?
Its My 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 referring dashboard GUI, i am working with this dashboard Example
https://github.com/angular-dashboard-framework/adf-dynamic-example
661
HTML DOM getAttribute() method is used to get the value of the attribute of the element. By specifying the name of the attribute, it can get the value of that element. To get the values from non-standard attributes, we can use the getAttribute() method.
You can use document. getElementById() in Angularjs, but manipulating HTML in a controller is not a good practice.
When it comes to do DOM manipulation, binding event, etc... It happens, that we define functions that manipulates the DOM in a custom directive's link function, but we call it from the controller (we define functions in the $scope so it can be accessible by the given controller).
The angular. element() Function in AngularJS is used to initialize DOM element or HTML string as an jQuery element. If jQuery is available angular. element can be either used as an alias for the jQuery function or it can be used as a function to wrap the element or string in Angular's jqlite.
If I understood question correctly, we are trying to pass URL of current page when adding new iframe.
If above is true, here is my solution:
$location into controller $location.$$absUrl
$templateCache
You can both use URL string as placeholder for input, or as input value. If it used as input value, iframe gets created instantly, since by original design it should be null
In GUI it's going to look something like this:
Content of 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);
Don't forget to actually import not minified file into index.html:
<!-- iframe -->
<script type="text/javascript" src="components/adf-widget-iframe/dist/adf-widget-iframe.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
