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&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.
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&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
Related
I have this html in my view
<div ng-repeat="newsItem in Items" >
<div style="background: url({{::newsItem.teaser) no-repeat center center; background-size: cover;"></div>
</div>
in the $rootScope I have an object that contains generated local URLs in this way:
$rootScope.images.someName
$rootScope.images.someNameX
$rootScope.images.someName3
My variables newsItem.teaser contains the names someName, someNameX, someName3. How can I use $root['someName'] in my view? Is this possible?
No need to specify $rootScope in html. You can use it the same way as you use $scope variables
<h1>{{newsItem.teaser.someName}}</h1>
The solution was to use ngStyle in this way
<div ng-style="{'background': 'url({{$root.images[newsItem.teaser]}}) no-repeat center center', 'background-size': cover}"> </div>
Hi I'm creating an Angular bootstrap popover, and the popover contains a directive. The user story is that when the user clicks on a row inside an ui-grid table, the popover will show. But it seems that in HTML code the data is not actually passed into the directive. Related code is here:
search.tpl.html:
<div class="gridStyle" ui-grid="vm.selectedTypes" ui-grid-resize-columns ui-grid-selection style="margin-top: 0px; z-index: 4; position: relative">
</div>
<script type="text/ng-templae" id="popover.html">
<div style="z-index:10; position: relative">
<type-view type="vm.type" domain="vm.domain" pos="{top: 0, left: 0}">
</type-view>
</div>
</script>
search.js:
//In configure
controllerAs: "vm",
...
//In controller
var vm=this;
vm.type=[...];
vm.domain=[...]; //both var get values inside
Now the popover is shown, and the directive is inside, but the values (vm.type and vm.domain) are not injected into the directive; I checked the console, and in the directive 'pos' is injected, so I suppose maybe it's because the scope is different inside a popover and directly using vm.sth will not work. How can I resolve this? Thanks!
I am calling error-stuff directive in my view as below and i am trying to override the directive's padding 15px to 0px in my view which is not working. So my div1's value and div2's values are not in a straight line since div2 takes more padding in my view.
Error:
Oops !!! Its look like something going wrong !!! Please try again later ...
<div id="div1" class="row">
<div class="pull-left">
<span>Error :</span>
</div>
<div id="div2" style="padding:0px; vertical-align:top">
<error-stuff></error-stuff>
</div>
</div>
The html template on the error-stuff directive as below
<div class="error-class">
<span>Oops !!! Its look like something going wrong !!! Please try again later
... </span>
</div>
in my app.css
.error-class
{
margin-bottom:20px;
padding:15px;
box-sizing:border-box;
line-height:1.5;
font-size:15px;
}
So how do i make div1 and div2 content in straight line by overriding the directives padding:15px to padding:0px?
Assuming error-stuff is used somewhere else and you can't change the global css, in this case you can use a targeted override by specifying the parent in css
#div2 .error-class {
padding: 0;
}
I am very new to angularjs, i have done some experimental projects in Polymer 0.5, so new to Polymer 1.0 as well.
I am facing an issue like inside ng-repeat i want to display some paper-card.
This issue is only on Chrome browser, In Firefox and IE-edge it is coming fine.
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
//--------------------------- HTML ----------
<div class="row content">
<div><h3>Teams <img ng-show="loading" ng-src='images/loader2.gif' width="30px" height="30px"/></h3></div>
<div ng-repeat="team in teams" ng-repeat="team in teams | filter:teamsFilter">
<div>
<style>
.collapse-content {
padding: 15px;
border: 1px solid #dedede;
}
</style>
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
</div>
</div>
</div>
//--------------------------- HTML -------------
I am using ng-polymer-element module,
I have the below code in my application app.js
angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
paperCard: {
ngModel: function property(element) {
return element.hasAttribute('multi') ? 'selectedValues' : 'selected';
},
ngHeading: '=heading'
}
});
window.addEventListener('WebComponentsReady ', function() {
angular.bootstrap(wrap(document), ['myApp']);
});
The Card header is coming fine but the binding variable is also displaying inside the card.
I inspect the HTML in the browser, i could see the paper-material is added twice and the second one is showing the brackets as it is.
Any help is highly appreciated. Thanks.
Most likely that Angular is not loaded properly; therefore, it hasn't kicked in to evaluate the expressions in the braces. Please post your entire HTML page.
I want use ng-class to conditionally add a class to the accordion-heading, but it appears that not even setting a class explicitly on the element gets preserved. I have this:
<div accordion close-others="true">
<div ng-repeat="currItem in items" accordion-group>
<div accordion-heading class="myClass">My Heading {{$index}}</div>
<div class="accordion-inner myClass">asdf asdf asdf</div>
</div>
</div>
And the fiddle: http://jsfiddle.net/Zmhx5/1/
When I inspect the accordion heading element, the class myClass is nowhere to be found. Is there some reason I can't add classes to the accordion heading?
You can put the CSS inside the directive accordion-heading tags:
<accordion-heading>
<div class="myClass">My Heading {{$index}}</div>
</accordion-heading>
In Angular UI Bootstrap, they have created a directive for accordion-heading. Template for this is written in ui-bootstrap-tpls.js. Try to modify directive for accordion-heading.
I ran into the same issue trying to conditionally apply a background color to the heading with ng-class. This is a bit of a workaround, but it does the trick.
First we need to remove the padding from the heading. If you inspect it, you'll see that it generates a div with a .panel-heading class and a padding: 10px 15px (see note below). The padding is what causes issues when trying to apply a background to a nested div, so lets remove it.
.panel-heading {
padding: 0;
}
Now we can add our nested div and give it the same padding to get back our previous look.
<accordion-heading>
<div class="myClass" style="padding: 10px 15px">My Heading {{$index}} </div>
</accordion-heading>
Here's the updated jsfiddle
Note my code above is from a different version of ui-bootstrap. The classes were slightly different in this jsfiddle, so you will see a slightly different solution. The concept, however, is the same.
you could just apply your CSS to an outer div like this:
HTML:
<div ng-app="myApp" ng-controller="MyCtrl">
<div accordion close-others="true">
<div class="myClass" ng-repeat="currItem in items" accordion-group>
<div accordion-heading>
<div>My Heading {{$index}}</div>
</div>
<div class="accordion-inner">asdf asdf asdf</div>
</div>
</div>
</div>
CSS:
.myClass {
background-color: gray;
color: black;
}
.accordion-inner {
background-color: green;
color: black;
}
JS:
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
$scope.items = [{}, {}, {}, {}];
});
then, change it to use ng-class and it should work just fine
pd: (Sorry about the bad english)