I am using angular-ui-router to control my states in my AngularJS application. In one partial I use jquery-file-upload. The problem that I have is that when I use the example given by jquery-file-upload, is that it defines the controller in the template like this:
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST"
enctype="multipart/form-data" data-ng-app="demo"
data-ng-controller="DemoFileUploadController" data-file-upload="options"
data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
...
</form>
The form tag has data-ng-controller="DemoFileUploadController". In my controller this creates all the file upload methods needed (like $scope.submit() and $scope.queue)
The problem is that I define my controllers angular-ui-router style, like this in my app.js:
$stateProvider.state('upload', {
url: "/upload",
views: {
"upload": {
templateUrl: "app/partials/upload.html",
controller: 'DemoFileUploadController'
},
}
})
But this piece of code causes my file upload methods, not to be loaded (or bound) in my controller (there is no $scope.submit() and $scope.queue).
Is there a way I can use angular-ui-router and jquery-file-upload together?
My fix is to simply omit the controller when defining the state:
$stateProvider.state('upload', {
url: "/upload",
views: {
"upload": {
templateUrl: "app/partials/upload.html"
},
}
})
This way I assign the controller in my template (like in the example data-ng-controller="DemoFileUploadController"). I am still looking for a way to assign my controller via the stateProvider.
Related
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
I have a main app on my application, called "bionico", this app utilizes UI-router
It has it's own $stateProvider configurations!
And that's fine, it works
BUT I needed to create a new module (cuz I'm trying to insert a step-by-step form on my application, you can find the code here: https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router)
To make this step-by-step form I need to create a new module with it's own $stateProvider configurations, the thing is that it doesn't work, I have included this module called "bionico.formApp" in my main app like this:
angular.module('bionico', ['ui.router', other modules, 'bionico.formApp'])
And that works fine, if I try to use a controller inside "bionico.formApp" it will also work fine. This is the code for this module:
// create our angular app and inject ngAnimate and ui-router
// =============================================================================
angular.module('bionico.formApp', ['ngAnimate', 'ui.router', ])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'templates/campaignForm/form.html',
controller: 'formCtrl'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'templates/campaignForm/form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'templates/campaignForm/form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'templates/campaignForm/form-payment.html'
})
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})
// our controller for the form
// =============================================================================
.controller('formCtrl', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
$scope.test = "FUNCIONA";
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
});
But to make this form work I need to use <div ui-view></div> and when I put this on my file nothing happens, and I think it's because the app is using my main module "bionico" $stateProvider configurations and not "bionico.formApp"
Here is my html code:
<div ng-controller="formCtrl">
<!-- views will be injected here -->
<div ui-view></div>
{{test}}
the {{test}} from formCtrl works fine, it is printing the variable on my screen, but like I said ui-view is not. Is there a way to tell angular that I want to use "bionico.formApp" configurations and not the configs from my main module?
How would you solve this?
Like I think I have to tell angular that from that moment on I want to use "bionico.formApp" but I don't know how to do it.
I've tried
<div ng-app="bionico.formApp"> but nothing happened, not even errors
I saw then on stack over flow that I have to bootstrap it manually, but then I got an error saying that "bionico.formApp" had already been bootstraped
Update
People suggested that I only needed to rout stuff in only one module, but I needed two different default routs one for my main application and one or my form, but that wouldn't work.
and the reason why I was trying to make this work was because I needed a step by step form (wizard) on my application like this one: https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router)
But I've decided it is not worth the hassle, I'll try to find another wizard for angular js
I'm using now this walktrough wizard:
https://github.com/mgonto/angular-wizard
It was easy to install and it is very easy to customize the template, I recommend!
I have an Angular application in which I'm creating a header to a page using uiRouter separate views:
Route config:
$stateProvider.state('content', {
url: '/content/{idContent}',
views: {
'header#content': {
templateUrl: 'templates/content/header.partial.html'
},
'mainContent': {
templateUrl: 'templates/content/index.html'
}
}
});
Content template:
<section ng-controller="ContentController">
<div ui-view="header"></div>
{{Here I display the content}}
</section>
Header template:
<section ng-controller="ContentHeaderController">
{{Here I render the header}}
</section>
The problem is, I need to access an object that is resolved in ContentController on the ContentHeaderController. I see that they don't share a parent scope:
ContentController: 4
ContentController's parent: 3
ContentHeaderController: 6
ContentHeaderController's parent: 5
How can I pass an object from the content view to it's header?
The problem of sharing data between controllers can be solved by using events (don't recommend it) and using services as models, which is a recommended way to do that because your data will be synchronized automatically and you will not be using soon to be deprecated API such as $broadcast.
The gist of this approach is to store data in service in an objects, not just as plain primitives on service intself, and then pass reference to this objects into controller where they are bound in template. Check this blog post about model pattern with code examples.
I have an app with a directive called fightcard. In my app configuration, I'm using ui-router to change the state. This code works...
$stateProvider
.state('matches', {
url: '/matches',
template: '<fightcard matches="matches"></fightcard>'
})
But... I was wondering if there is a property on state like controller to simply pass in the directive instead of an html template. I'd like to do something like this:
$stateProvider
.state('matches', {
url: '/matches',
directive: 'fightcard',
directiveModels: ['matches']
})
The html template option isn't that terrible - it may actually be superior - just wondering if there is an alternative in more "angular way" or perhaps the html template is the preferred approach. Each match has sub views for the best of games... probably it's better to have the directives contained a simple html templates like so:
$stateProvider
.state('matches', {
url: '/matches',
templateUrl: 'partials/matches.html'
})
.state('matches.games', {
url: '/games',
templateUrl: 'partials/games.html'
})
matches.html template
<fightcard matches="matches"></fightcard>
games.html template
<h6>BEST OF 5 GAMES</h6>
<div ng-repeat="gameModel in games">
<game gamemodel="gameModel" class="centerText"></game>
</div>
Putting the directive in a template is THE way to use the directive in AngularJS.
If you wanted to get fancy, you could extend .state() using the .decorator() method of $stateProvider to parse your special config and create that template for you, but it would really be a round-about way to go about using the directive.
I have an AngularJS app and use the ui-router for routing. One of my pages has two similar sections with the same template and logic (so I hope they can use the same controller). The only difference between them is for example type property. Here is simplified fiddle of the page: http://jsfiddle.net/e_gluhotorenko/XeX59/7/.
So Is it possible to provide custom different data to the views's scopes ? Something like custom data in states but for views:
views: {
'section1' : {
templateUrl: 'section.html',
controller : 'ctrl',
data : { type: 'type1'}
},
'section2' : {
templateUrl: 'section.html',
controller : 'ctrl',
data : { type: 'type2'}
}
}
Or with ui-view directive like in ng-inclide's onload:
<div ui-view="section1" onload="type = 'type1'"></div>
<div ui-view="section2" onload="type = 'type2'"></div>
Just found out that ui-view actually has onload attribute, it is absent in documentation but is in API ref. So my example from the question works! fiddle
Did you try ng-init as in <div ui-view="section1" ng-init="type = 'type1'"></div>?
That should work, I would link the angular docs for ng-init, but the site seems to be down right now