I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
Related
I'm trying to insert an html tag with ng-click event in the kendo editor. When I get the inserted data and show in a div, ng-click is not working. The normal onclick in javascript is working fine, but ng-click is not.
The below given is the <a> tag inserted on the editor text area.
<a ng-click="testMsg()"><span>' + nodeId + '</span></a>
Any idea on how to resolve this ?
onclick is DOM native event handler but ng-click isn't. Only those functions that are registered in the scope will be available. Any built-in functions will NOT be available to ng-click without an explicit assignment to the scope as my example shows.
var app = angular.module('app1', []);
app.controller('ctrl1', ['$scope', function($scope) {
function testMsg() {
alert('Hello world');
}
$scope.goodTestMsg = testMsg;
}]);
<div ng-app="app1" ng-controller="ctrl1">
<p ng-click="goodTestMsg()">Click me will show a message</p>
<p ng-click="testMsg()">Click me should happen nothing</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
TL;DR: The method testMsg is not exposed to the controller scope. Try adding something like $scope.testMsg = testMsg; will solve your problem.
Instead of textarea, try using div. I am facing similar problem which was partially solved with div. However it will be inline editing as the toolbar will get hidden and it will be displayed only when you focus cursor on the div.
I am working on an app that submits the form and get the result from the server which followed by HTML table view. My input form is a bit big which covers whole the screen. When the table comes then I want automatically scroll down at the table view. I used $anchorScroll from angularJs. But I am not able to achieve the result what I want. I also used $timeout to make sure the table is already exist or not and then perform $anchorScroll, but still no success. (based on this solution : Using $location and $anchorScroll to scroll a table row into view
Hear is my code.
HTML
<div data-ng-controller="searchController as searchCtrl" id="scrollArea">
<form>
//HTML input elements
<div class="buttons">
<md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
</div>
</form>
</div>
<!-- Smart Table for displaying result -->
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
//table content
</div>
Controller
angular.module('myApp')
.controller("searchController", function($log, searchService, $scope, $location, $anchorScroll, $timeout){
var self = this;
self.gotoTable = function(resultTable)
{
$timeout(function() {
$location.hash(resultTable);
$anchorScroll();
});
};
});
I dont know why its not working?
Do i need to define the id scrollArea and resultTable in my CSS?
Any help would be appreciated.
Thanks in advance.
UPDATE
Based on Okazari's solution, I tried to put a another div with many br tag above at the very bottom of my HTML. Now When I refresh the page then it automatically scroll to that div tag without clicking Start. this is a bit weird. I also tried to cover the
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">
tag with another div tag with id = "resultTable".
But still it did not work.
You actually are invoking your function without any parameters
ng-click="searchCtrl.gotoTable()"
whereas in your controller you expect to have one :
self.gotoTable = function(resultTable)
Try something like this
ng-click="searchCtrl.gotoTable('resultTable')"
or this :
self.gotoTable = function()
{
$timeout(function() {
$location.hash("resultTable");
$anchorScroll();
});
};
(just one, not both)
Hope it helped.
EDIT : Pretty sure that you can't go to a hidden div. As i said in comment your ng-show may be evaluated to true when you try to anchorscroll().
Here is a working plunker without ng-show. I'll build a tiny solution to avoid the ng-show issue.
To avoid this side effect, i wrapped the div with ng-show with another div.
<div id="resultTable">
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>
I have an Angular controller which lives in a portion of the page however that application needs to get access to an HTML element that lives above it.
The best way to imagine the problem is that you have an embedded video which wants to request to be made full view-port:
<html ng-app="videoApp">
<body>
<div>
Other stuff that doesn't relate to the video player...
</div>
<div ng-controller="videoCtrl">
... stuff relating to the video controller
</div>
</body>
</html>
The exact problem is that the videoCtrl needs to be able to add a class to the body class such that it can switch the page layout to being full-page and dominated by the video.
Desired outcome, status of video app adds a "full-page" class to body tag:
<body ng-class="video.fullPage ? 'full-page', : ''">
What's would be the correct way for the video to add a class to an ancestor tag?
Under normal circumstances where the element we want to manipulate lies inside the controller that's doing the manipulation we can bind elements to variables in the scope:
<body> <!-- the videoCtrl scope is not available to <body> -->
<div ng-controller="videoCtrl">
<div ng-class="video.fullPage ? 'fullPage' : ''"></div>
</div>
</body>
However the body tag is not contained within the scope of the video controller and so has no access to the variables in its scope so we can't bind to them.
We could always reach out directly and change the class on the body using dom manipulation but that's not very Angular. What is the correct pattern for the video controller to alter the class of the body tag?
To meet a very similar requirement, I used Angular events. From the controller, $broadcast an event on $rootScope. Then have some sort of screen layout controller handle the event and toggle the possible screen configurations.
So:
child controller:
$rootScope.$broadcast('layout-action', { configuration: 'video' });
layout controller:
$scope.$on('layout-action', function(event, args) {
if (args.configuration == 'video') {
$scope.showVideo = true;
}
});
html:
<body ng-class="{'full-page': showVideo}">
*Note: this does slightly tie the child functionality to another part of the layout. However, perhaps try to generalize the video layout. For example, maybe you want a full screen mode instead.
If ng-app="videoApp" is the only parent, you could also do something on the button that would trigger the full-page class like this:
<body ng-class="{'full-page': showVideo}">
<div ng-controller="videoCtrl">
<button ng-click="$parent.showVideo = !$parent.showVideo">I'm in the video controller!</button>
</div>
</body>
In this case i'm just toggling showVideo to true or false. But like Davin said, this may not be as nice because it depends more on where it sits in the app.
See this plunkr for an example http://plnkr.co/edit/UxtA0YvCUckofAflsy9G
My requirement is to display a spinner image on every $route change request and hide the spinner image on success or error. I am using angular-animate.js to slide the view after the $route success
<div ng-cloak ng-controller="sliderController">
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}">
</div>
</div>
I need to hide to progress image (Spinner) after the new page is loaded (ie : on complete page animation)
Any help would be appreciated.
In your code, I don't see anything that is showing what you're doing for the spinner. So this will be just a stab in the dark at what you're looking to accomplish.
One option is to use an app-wide progress bar. Think of how YouTube does page transitions. The Angular Loading Bar is a good solution to accomplish this. I think it uses $http interceptors to do it (good explanation of interceptors).
Another option would be to use $routeChangeStart and $routeChangeSuccess that are part of the $route provider. You can simply have a $scope variable that triggers whether or not the image should be visible.
$scope.$on("$routeChangeStart", function(event, next,current) {
$scope.spinnerDisplayed = true;
});
$scope.$on("$routeChangeSuccess", function(event, next,current) {
$scope.spinnerDisplayed = false;
});
And then your HTML would just have a basic ng-show/hide
<div ng-show="spinnerDisplayed">
<!-- some spinner image here -->
</div>
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>