パスと私は角JSで本当に新しいですアンギュラJSモジュールに</p> <p>を

をDOM要素の値を取得し、私はそのファイル（adf-このパスと私は角JSで本当に新しいですアンギュラJSモジュールに</p> <p>を

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

のようなJSファイルをロードする1つのHTMLページを、持っていますウィジェットiframe.min.js）コンテンツは、私はhtmlページから値を取得する必要がありますし、コーンのように私が持っている（URLの場所に置く必要があり、上記のコードでは

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

以下に示します。そこにコメントした。）

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>

その私は質問が正しく、私たちは現在のURLを渡そうとしている理解している場合、私はこのダッシュボード例

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

出典

2015-12-15 Juhan

で働いている私の参照ダッシュボードGUI、新しいiframeを追加すると、

真である上記の場合は、ここに私の解決策は次のとおりです。

を注入$locationコントローラ
に現在のページの絶対パスを取得します。$templateCache

で$location.$$absUrl

使用絶対パス値をURL文字列を入力用のプレースホルダとして使用することも、入力値として使用することもできます。

コンテンツのADF-ウィジェットiframe.js：それは入力値として使用する場合は、元のデザインで、このような何かを見に行くのGUIで

nullになるはずなので、iframeは、瞬時に作成されます：

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

出典

2015-12-17 03:01:33 oKonyk

パスと私は角JSで本当に新しいですアンギュラJSモジュールに</p> <p>を

答えて

関連する問題