html属性に角度設定を割り当てる方法

私は変更するapp.jsを持っていて、settings.options.chatURL.valueをhtml iFrame scr属性に引き出すためにすべてを試しました。一番近いのはアラートウィンドウを引き出すことですが、{{settings.options.chatURL.value}} ???html属性に角度設定を割り当てる方法

あなたが角度そうのようなDOMのその部分の上にスコープを持つようにするために、これらのDOM要素の一つに ng-appと ng-controllerディレクティブを配置する必要があり

var app=angular.module('settingsGenerator',['colorpicker.module','jdFontselect']).constant('jdFontselectConfig',{googleApiKey:'xxxxxx'}); 
app.controller('SettingsGeneratorCtrl',['$scope', '$window', function($scope, $window){ 
    var Setting=function(type,desc,dflt,required){ 
    this.type=type||"String"; 
    this.desc=desc||"This is a setting that can be changed to a value."; 
    this.required=required||false; 
    this.default=dflt; 
    this.value=dflt; 
    this.toString=function(){ 
     return this.value.toString(); 
    }; 
    }; 
    $scope.products={ 
    'customizable-intro':{ 
     name:'Customizable Intro', 
     settings:{ 
     options:{ 
      backgroundDisplay:new Setting("Radio","Do you want to display a background?","yes",true), 
      backgroundType:new Setting("RadioV","Video or Image Background?","image",true), 
      chatDisplay:new Setting("Radio","Do you want to display a Chat Box?","yes",true), 
      chatURL:new Setting("String","Chat Box URL (stream labs)","http://example",false) 
     } 
     } 
    } 
    } 
}]);

<html> 
    <div id="chat"> 
     <iframe id="twitchChat" src="*({{NEED URL HERE}})*"> 
     </iframe> 
     <span id="chatURL">{{settings.options.chatURL.value}}</span> 
    </div> 
</html>

出典

2017-02-08 Anthony Lester

あなたのHTMLページに、角持っていますか？ – MMK

：

ます一度スコープ内で角度を取得すると、オブジェクトにアクセスする必要があります。これは、コードに基づいていくつかのレイヤーが欠落しているようです。 $scope.settings.options.chatURL.valueにアクセスしていて、それは$scope.products['customizable-intro'].settings...である必要があります。毎回完全な名前空間を使用するか、ng-initディレクティブを使用して短縮します。

また、平文src属性で角度補間を使用しようとすると、一貫して正しく動作しないと文書化されており、角度文書によれば、ng-srcを使用することを推奨します。 Docs Here

<html ng-app="settingsGenerator"> 
    <div id="chat" ng-controller="SettingsGeneratorCtrl" 
     ng-init="settings = products['customizable-intro'].settings"> 
     <iframe id="twitchChat" ng-src="{{settings.options.chatURL.value}}"></iframe> 
     <span id="chatURL">{{settings.options.chatURL.value}}</span> 
    </div> 
</html>

出典

2017-02-08 22:25:29 mhodges

[http://friendlyneighborhoodgeeks.com/twitch/overlays/settings-generator.html]（ウェブサイト）ng-controllerとinitで何も追加しないであなたの方法を試しました –

@AnthonyLester "まだ何も"私を助けません。このコードを実行すると特に何が起こりますか？何がうまくいかない？エラーメッセージが出ますか？ chatURLスパンに正しいURLが表示されていますか？ – mhodges

src属性を要素に動的に追加することができます。 setting関数はオブジェクトキーに設定する値を返す必要があります。以下のコードを参照してください。

var app = angular.module('settingsGenerator',[]); 
 
app.controller('SettingsGeneratorCtrl', function($scope){ 
 
$scope.Setting = function(type,desc,dflt,required){ 
 
return { 
 
    type: type||"String", 
 
    desc: desc||"This is a setting that can be changed to a value.", 
 
    required: required||false, 
 
    default: dflt, 
 
    value: dflt 
 
    } 
 
} 
 
$scope.products = { 
 
    'customizable-intro': { 
 
    name:'Customizable Intro', 
 
    settings: { 
 
     options: { 
 
     backgroundDisplay: $scope.Setting("Radio","Do you want to display a background?","yes",true), 
 
     backgroundType: $scope.Setting("RadioV","Video or Image Background?","image",true), 
 
     chatDisplay: $scope.Setting("Radio","Do you want to display a Chat Box?","yes",true), 
 
     chatURL: $scope.Setting("String","Chat Box URL (stream labs)","https://www.google.com",false) 
 
     }}}} 
 

 
$scope.al = function(){ angular.element(document.getElementById('twitchChat')).attr('src', 'http:/www.example.com') 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div id="chat" ng-app="settingsGenerator" ng-controller="SettingsGeneratorCtrl"> 
 
    <button ng-click="al()">button</button> 
 
     <iframe id="twitchChat"> 
 
     </iframe> 
 
     <span id="chatURL">{{products['customizable-intro'].settings.options.chatURL.value}}</span> 
 
    </div>

出典

2017-02-09 12:54:32

html属性に角度設定を割り当てる方法

答えて

関連する問題