I am having on angular page.
Page1 :
In which configuration is
.when('/Test/:empId', {
templateUrl:'/Templates/test.html',
controller: 'TestController'
})
.when('/Test/:depId', {
templateUrl:'/Templates/test1.html',
controller: 'Test1Controller'
})
Then i have another page
Page 2:
This page is normal mvc razor page having button
Button1
On click of that button i want to show modal which contain
Page1
So i wrote
$.ajax({
url: '/Templates/test.html',
type: 'GET',
success: function (responce) {
var elem = angular.element(responce);
$('#testModalBody').html(elem);
$('#testModal').modal('show');
//console.log('test responce');
}
});
I am just getting html response, it does not execute 'TestController'
So the scope variables are not getting values declared in TestController, and not able to see data html pages. Just see static html template.
Instead of using $.ajax, you should use $http service of Angular JS.
Instead of doing like this $('#testModalBody'), you can use ng-bind-html.
To bind HTML please read below link.
https://www.w3schools.com/angular/ng_ng-bind-html.asp
Related
I have a controller I am calling an API on MVC.
This API returns me back a partial view, This partial view is associated with my controller from which I am calling the API .
Now as soon as I getting the partial view back, I am vanishing the html of the view and then re-rendering the view.
but my controller method never get initated, I guess because the controller is already initiated.
Question is can I call method of controller when it loads back.
html :
<div id="pageholder">
<-- here is my view , which I am changing thru API , and I want to re render it, and also want to perform certain controller methods -->
</div>
ANGULAR :
$http({
method: 'POST',
url: url,
data: {
config: item,
parameter: itemParametrs
}
}).success(function(data, status) {
$('#pageholder').empty();
$scope.username="username";
$('#pageholder').html(data);
});
PLEASE HELP!
You need to compile that new HTML you get. No directive or controller will be watched by Angular if you dynamically write HTML:
.success(function(data, status) {
$scope.username="username";
var $pholder = $('#pageholder');
$pholder.empty();
$pholder.html(data);
// Recompile the HTML so angular can process it
$compile($pholder)($scope);
});
PS: you will need to get the $compile service in your directive/controller (the same way you get $http)
I want to try dynamic route request but It's not working properly. And here I explain my coding style step by step.
<nav class="main-nav" ng-show="global.user.user_type!='admin'" ng-repeat="mMenu in Mainmenu">
{{mMenu.MenuName}}
</nav>
This code contain URL link and It's load every time with a variable that is web address link. And the link is something like that - http://localhost/views/adminpanel/about.html
In AngularJS Controller contain the code -
$scope.geturl = function(url)
{
var params = {
url1 : '/views/adminpanel/'+url
}
$http({'method' : 'post', url : 'views/adminpanel/'+url, data: params
}).success(function(data)
{
}).
error(function(data){
})
}
configuring and using ngRoute -
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: 'views/adminpanel/:url'
})
In server side (Express) :
Routing HTTP requests, Configuring middleware and Rendering HTML views
app.post('/views/adminpanel/:url',auth.requiresLogin, users.geturl);
exports.geturl= function(req,res)
{
var url = req.body.url1;
res.render(url);
}
This is all about my rendering process but It's not working. In browser It only shows the URL link but not shows any content. How can I solve It any idea?
I think you are confusing things:
first of all you have a link together with a ngClick: you should have either of those
your ngClick has an empty success function, so it does nothing with the template
you have a route set with express that matches with the ngRoute (btw, POST is usually used to create resources, you should GET the template)
your templateUrl is going to send a GET request to (literally) /views/adminpanel/:url, it does not replace :url
To fix it:
set a different endpoint for your APIs
use a GET endpoint instead of a POST
change the ngRoute to:
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: function(param) {
return '/api/<path>/' + param.url;
}
})
remove the ngClick from the <a>
I'm new in AngularJS Community and I'm developping my first app with this Framework.
I created a new controller with this code :
.controller('AccountCtrl', function($scope, $location) {
alert('test');
})
And my route :
.state('app.account', {
url: "/account",
views: {
'menuContent': {
templateUrl: "templates/account.html",
controller: 'AccountCtrl'
}
}
})
The alert popup is shown the first time I access to the controller. But, if I change URL and I come back to AccountCtrl (with a classic html a), the alert popup is not shown again.
Could somebody explain to me why ?
Thanx for your help !
In Ionic Framework views and controllers will be cached by default. You ma add a listener to the views scope to receive a notification when the view is re-active again. For more information see: http://ionicframework.com/docs/api/directive/ionView/
and http://ionicframework.com/docs/api/directive/ionNavView/
You may also disable the cache on a view <ion-view cache-view="false">
.controller('AccountCtrl', function($scope, $location) {
$scope.$on('$ionicView.beforeEnter', function () {
// update campaigns everytime the view becomes active
// (on first time added to DOM and after the view becomes active after cached
alert('test');
});
})`
to reload Controller each time in ui router, use reload: true option on the .state
$stateProvider
.state('app.account', {
url: "/account",
reload: true //forcefully reload route and load controller again
})
I have a text box with a search Button as below
On clicking the search button, I am calling SearchController.search method and
my expectation is it will display a new page with the result.
$scope.search = function () {
$http.get('data/results.json').success(function (data) {
$scope.activities = data;
$state.go('results',data);
});
and my app.js looks as below
var myApp = angular.module('MyApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('results', {
url: '/results',
templateUrl: 'result.html',
controller: 'SearchController'
});
$urlRouterProvider.otherwise('/');
});
But when I click on search button, nothing happens and url only changes to l/#/results .
I am not having any ui-view in search page and I want to go results page to display the result. How to get this fixed? what is the mistake I am doing?
You can't send a not mapped object into $state.go.
Looking the API: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
Another similar problem: AngularJS: Pass an object into a state using ui-router
If you want to display it on a different page, use the "ui-sref" on the html to navigate to the new page and call ng-init on the page e.g
<button type="button" ui-sref="results">
and on result.html, you can call the init on the parent node such as
<section ng-init="search()">
.....
....
</section>
and your controller will look like this now
$scope.search = function () {
$http.get('data/results.json').success(function (data) {
$scope.activities = data;
});
With ui-router, state changes happens and different view is displayed based on state. So , when ui-router is used , moving from one page to another page is a wrong perception . We move from one state to another state and hence parameter passing can be done using "services".
I am using combination of AngularJS and Adobe CQ5.
I have implemented routing to load different views. The views are loading perfectly but the URL is not appending the #/path and it shows the base path only, e.g.
localhost:7001/cf#/content/requestpage.html#/
rather than
localhost:7001/cf#/content/requestpage.html#/checkstatus.
Due to this, when I refresh the page it loads the route path (/) template instead of loading the same view again.
I am struggling to resolve this issue. Here's my controller code:
var demoapp=angular.module('demoApp',['ngRoute','ngSanitize']);
demoapp.config(function($routeProvider,$locationProvider) {
// use the HTML5 History API
//$locationProvider.html5mode(false);
$routeProvider
.when('/', {
templateUrl: '/content/index.html?wcmmode=disabled',
controller: 'myfirstcontroller'
})
.when('/checkstatus', {
templateUrl: '/content/housetemplate.html?wcmmode=disabled',
controller: 'houseController'
})
.otherwise({
redirectTo: '/'
});
});
demoapp.controller('houseController', function($scope, $routeParams,$http)
{
//code
});
demoapp.controller('myfirstcontroller', function($scope,$http,$rootScope,$location,$compile)
{
//On Form Submit
$scope.continueForm = function(isValid){
if (isValid)
{
$location.path('/checkstatus');
}
});
});
This is not an issue with CQ5. When you open a page from Siteadmin, by default your page is loaded within contentfinder (/cf#).
Now, contentfinder already has your page URL as the hashvalue. Hence you find that the URL doesn't get updated even though your angular views work correctly.
Try accessing the same page without contentfinder. i.e.,
http://localhost:7001/content/requestpage.html
instead of
http://localhost:7001/cf#/content/requestpage.html
You should find things working as expected.