I have an iframe inside my angular partial which loads on $route
ex: /dashboard/a-view-with-iframe
<iframe id="portal" src="/templates/view.html" frameborder="0"></iframe>
Now the view.html has the below code
<div ng-controller="portalViewCtrl">
checking...
<span ng-bind-html="view"></span>
</div>
The controller is defined as follows
app.controller('portalViewCtrl', function ($scope) {
console.log('not happening');
});
When my main partial is loaded the iframe loads as well and from within the view i am able to see "checking..." as well, but the console.log() form within the defined controller does not fire. I am not sure if this is possible or i am missing out something very silly here.
Any help is appreciated.
Related
I'm new to AngularJS and I'm working on a small project to get the hang of how things work.
Basically I want to have a single-page app where I can dynamically change part of the page to include html from some other file. This other file has a controller and such. I would like the url to stay the same. I need the page to be loaded dynamically with a variable name.
Right now, I can get the HTML to load from the imported template, but a lot of HTML is excluded and all of the "ng" tags are gone. I take this to mean that this new page can't find the controller or a lot of the stuff is getting compiled out or something. Maybe I'm not importing things in the correct order? I have no idea. Here's my basic layout:
app.js
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.htmlContent = 'somepage.html';
$scope.externalPage = 'otherpage';
$scope.changePage = function(page) {
$scope[page]();
}
$scope.otherpage = function() {
$scope.htmlContent = 'otherpage.html';
}
});
app.controller('InternalPage', function($scope) {
alert('hello world');
$scope.content = "This is not showing";
});
index.html
<div ng-controller="Main">
<!-- This all works. Clicking "Change Page" changes the
HTML referenced by the <div> tag -->
<a ng-click="changePage(externalPage)">Change Page</a>
<div ng-bind-html="htmlContent"></div>
</div>
otherpage.html
<div ng-controller="InternalPage">
<p>{{content}}</p>
</div>
I have tried including the javascript in the html file itself to no avail. I also could not get the ng-include thing to work either.
Try looking into ng-include instead of ng-bind-html:
https://www.w3schools.com/angular/angular_includes.asp
I am new to AngularJS.
Here i want to display some html while switching from one controller to another.
This is my HomeController
function HomeController($scope) {
alert("hi");
$scope.myValue = true;
}
This is my MainController.
Initially it is false in my MainController.
function MainController($scope,$location) {
$scope.myValue = false;
}
and this is my body.
<body ng-controller="MainController as main">
<div id="sradha" ng-show="myValue" >Show-side-bar</div>
<div ui-view></div>
<!--<script src="js/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="../js/ui-router/angular-ui-router.min.js"></script>
<script src="../js/all.js"></script>
</body>
My problem is Show-side-bar is showing for 2 to 3 seconds when i am doing the refresh ,then it hides .I have checked in console .It is hidden in the HTML.Here i want to show this show-side-bar when I am redirecting from login response ( $window.location.href = 'http://localhost/Angular-js-admin/admin/#/home';) to home page of my project
I have attached some screen shorts ,please have a look.
https://i.stack.imgur.com/BWnlz.png
https://i.stack.imgur.com/JKzsh.png
Thank You.
As you are using controller as syntax. So, the controller function we declare as usual, just using the this Object instead of $scope.
app.controller('MainController', function () {
this.myValue = true;
});
This is more of a class based setup, and when instantiating a Controller in the DOM we get to instantiate against a variable :
// MainController doesn't exist, we get the `main` instance only
To reflect this.myValue based check in the DOM, we need to do this :
<div ng-controller="MainController as main">
<div id="sradha" ng-show="main.myValue" >Show-side-bar</div>
</div>
Demo!
We can use ngStorage to keep scope variable on page reload by using $localStorage in controller.
$scope.var1 = $localStorage.var1;
$scope.var2 = $localStorage.var2;
$scope.var3 = $localStorage.var3;
and in your function update $localStorage variables the same as $scope variables (assign) new values.
it works with me to keep div element shown using ng-show (depending on $scope variable) after page reload.
Example: to keep chat inbox opened after page reload without re-opening it.
we can find more on github page.
I am using https://github.com/localytics/angular-chosen for an angular chosen box application with remote loading as in the example.
angular.module('App', ['ngResource', 'localytics.directives'])
.controller('BeerCtrl', function($scope) {
$scope.beers = $resource('api/beers').query()
});
My controller is a controller connected to a view which only comes into play when a user clicks the edit button:
<div id='modal' ng-switch on="modal">
<div ng-switch-when="view" ng-include="'view.url'"></div
<div ng-switch-when="edit" ng-controller="BeerCtrl" ng-include="'edit.url'"></div>
</div>
This does not work (does not load options into chosen select -- options are however available and even visible in the DOM in the original "select" box).
However, when I move the ng-controller tag to the #modal div, it does work, however, it calls the resource on page load which is a waste since I only need the options loaded (many!) if the edit modal is opened.
Any help is appreciated.
Thanks
I am working on MVC4 with angular JS and using ng-include to call a partial view inside my main view. Issue comes when I am trying to click a button inside my partial view.
I have two different controllers in angular, one for main and other one for a partial view both are working under same module.
My file structure is as follows
Scripts..
|
--Main.js
|--ProjectPage.js
(Main.js)
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope) {
$scope.templateUrl = '/Home/DefaultPage';
};
(ProjectPage.js)
angular.module("Layout")
.controller("CNTRL", function ($scope) {
$scope.clickBtn1 = function () {
alert("ABU");
};
});
and this is the HTML, I am using for partial page
<body ng-app="Layout" ng-controller="CNTRL">
<button ng-click="clickBtn1 ()" id="click">click</button>
The partial view is working fine when its called up independently(not inside the main view). No error is coming inside the browser but click event is not working.
The problem is probably because you are calling the "app" twice. Once in your layout (html) page and then in your partial page. You can fix this by replacing:
<body ng-app="newLayout" ng-controller="CNTRL">
With:
<div ng-controller="CNTRL">
<!-- button code here -->
NOTE: The change from body to div (can be any html container tag) and removal of ng-app directive.
Here! You have same module name so it will consider first one.
Just different name both and it will works..
main.js
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope) {
$scope.templateUrl = '/Home/DefaultPage';
};
ProjectPage.js
angular.module("newLayout")
.controller("CNTRL", function ($scope) {
$scope.clickBtn1 = function () {
alert("ABU");
};
});
Body content
<body ng-app="newLayout" ng-controller="CNTRL">
<button ng-click="clickBtn1 ()" id="click">click</button>
I need to use <\object> tag or <\iframe> inside one of my partial html and use that html in another html page with ng-include. This is my try,
<div class="container">
<!-- This part is not showing anything in the page -->
<object ng-attr-data='"templates/widget_1.html"' type="text/html"></object>
<!-- This part is showing page in view -->
<div ng-include src='"templates/widget_2.html"'></div>
</div>
OR
If I want to use <\iframe> within this page how can I use that?
to achieve this, you need to write a directive and load the template by yourself
app.directive("object", function ($templateCache, $http, $compile)
{
return {
restrict:"E",
link: function ($scope, $element)
{
//load the external partial with http and cache into the $templateCache
$http.get($element.attr("ng-attr-data"), {cache: $templateCache}).then(function (response)
{
//Fill the loaded html into the element
$element.html(response.data);
//compile the scope on it, to enable bindings.
$compile($element.contents())($scope);
});
}
}
});