我真的是 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
最佳答案
如果我理解正确，我们在添加新的 iframe 时尝试传递当前页面的 URL。
如果以上是真的，这是我的解决方案:
$location注入(inject) Controller $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>
关于javascript - 在 Angular JS 模块中传递并获取 DOM 元素值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34286564/
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url
我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or
我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的
我安装了ruby版本管理器，并将RVM安装的ruby实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby。有没有办法让emacs像shell一样尊重ruby的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit