0

I have this in my dom

<div id=“my-lightbox-container" style="height: 0px;”>
<div id=“my-lightbox" role="dialog" style="width: 660px; height: 342px;”>
<button id=“my-close" aria-label="Close Dialog"></button>
<iframe id=“my-iframe" name=“my-iframe" title="" src="https://mysite.com/mypage.php?page=sign-in&amp;prop=sign-in" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>
<div class="my-clear"></div>
</div>
</div>

I need to be able to parse the value of src to do some business logic. I need to get the value of my attribute. I am pretty new to angular. I have done some reading and seems like that I should be using directives. However I wasn't able to make sense of the solutions. Below is my controller which is barebones

module.exports = function($scope, $routeParams, $location)
{

}

would appreciate any help here. Coming from jQuery background.

Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221

1 Answers1

-1

Use the ng-src directive instead of src and bind it to a variable in your scope :

<iframe id=“my-iframe" name=“my-iframe" title="" ng-src="context.url" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>

And in your controller : 

$scope.context = {'url':'https://mysite.com/mypage.php?page=sign-in&amp;prop=sign-in'};

That way, you have two-way binding between your controller variable and your iframe source. If one changes, the other will reflect this change.

You might also want to look into the $sce service : How to set an iframe src attribute from a variable in AngularJS Angular doc: https://docs.angularjs.org/api/ng/service/$sce

Community
  • 1
  • 1
Sycomor
  • 1,272
  • 11
  • 15
  • I do not have it available in my controller. The value of src gets sets dynamically so in controller I would have no idea what the value is and I can not do this $scope.context = {'url':'https://mysite.com/mypage.php?page=sign-in&prop=sign-in'}; as prop may be different for different dynamic values. So I have to get that from iframe source – Asim Zaidi Oct 02 '14 at 16:38
  • What provides the iframe url ? Anyway, if you define a $scope.context and bind ng-src to its url value, context.url should be updated by your unknown external source, since it is a two-way binding – Sycomor Oct 02 '14 at 16:57
  • you have my code above. Can you show me wht do you mean by define and then bind to the context.url. I am not sure – Asim Zaidi Oct 02 '14 at 17:23
  • do what I did in my code above, except you only define $scope.context = {}. If some external source (that I can't see in your code since the url is hardcoded) gets to change your iframe source, you will be able to access its value in your controller via $scope.context.url ; depending on whether you need to adjust your view as soon as the source gets updated or you can wait for another prompt (e.g. the user clicking on some button), you might also need to $watch the variable to react to a change. – Sycomor Oct 02 '14 at 18:33