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
Related
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.
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 have a cross platform app developed using Onsen UI, Monaca and AngularJS.
I am trying to navigate to a new page from a controller when the user clicks a button on my view. I am following a solution from THIS SO post but I keep getting the error: TypeError: Cannot read property 'pushPage' of undefined at Scope.$scope.getDateAndPushPage
I have my view set up to display a listview of dates using ng-repeat and when the user clicks on any of the listview items, I get the selected date item and and use it in my controller to perform some calculations. Once this is done I need to segue to the next page to display the calculations.
My listview looks as follows and displays the list of dates stored in data:
<ul class="list">
<li ng-repeat="myDate in data" class="list__item list__item--chevron" ng-click="getDateAndPushPage(myDate.date)")>
{{myDate.date}}
</li>
</ul>
In my views controller I try and push the new page as with the the example mentioned above as per my code below:
var dateReports = angular.module("dateReportsController", []);
dateReports.controller("DateReportsController", function($scope, $http, $rootScope)
{
$scope.getDateAndPushPage = function (myDate)
{
var page = "date-report-details.html";
console.log("Page: " + page); // OK here - outputs page: date-report-details.html
console.log("My Date: " + myDate); // OK here and do calculation
$rootScope.ons.myNavigator.pushPage(page); // Error here
}
});
And finally in my index.html I have my navigator defined as:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<!-- Usual content goes here - omitted because not relevant -->
</head>
<body>
<!-- The first page in the navigation stack -->
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>
I have tried all the solutions offered on the above mentioned SO post but none seems to be working for me. I have my app setup in such a way that all controllers are split into their separate files to make it easier to manage. To this effect my main app.js file looks as follows and Im not sure is this where the issue is coming from
var app = angular.module("myApp", ['onsen', 'loginController', 'dateReportsController']);
your code is not able to find myNavigator variable. Try changing :
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
to <ons-navigator id="myNavigator" page="login.html"></ons-navigator>
and use: $rootScope.ons.$get('#myNavigator').pushPage(page);
To navigate to from page to another page, you can use the following code.
HTML
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
In controller
$rootScope.myNavigator.pushPage('page2.html');
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);
});
}
}
});