current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have an app.js that I'm modifying and have tried everything under the sun to pull out the settings.options.chatURL.value into an html iFrame scr attribute. closest I get is pulling out an alert window but still says {{settings.options.chatURL.value}}???

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>
share|improve this question
1  
have you got angular in your html page? – MMK 1 hour ago
up vote 0 down vote

You need to put the ng-app and ng-controller directives on one of those DOM elements in order for angular to have scope over that part of the DOM like so:

Once you get Angular in scope, you will need to access your object, which you seem to be missing a few layers of, based on your code. You are accessing $scope.settings.options.chatURL.value and it should be $scope.products['customizable-intro'].settings... You can either use the full namespace every time, or simply use the ng-init directive to shorten it down.

Also, trying to use angular interpolation with the plain src attribute has been documented to not work consistently properly, and according to the angular docs, they recommend using 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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.