how to manage multiple state using ui-router in angularjs
I'm working on a project using angularjs with nodejs as backend, i'm building a single page application(spa) in angularjs for that.
so, I need your help at one point which is that there are two state for example state A and it's sub state aa (it is related to my project).
all the state share a common controller which is on main template file,
okay.
Now come on the point i want to upload a file code is written in sub state aa template file, when i access that file variable using scope from the controller then i console it undefined. i don't understand why i showing it undefined, but when i apply controller separately on sub state aa then it console the file value. but why it doing so, i don't want that, please anybody help me to out come from this problem.
Here is my code of state aa which is using for file upload
<div>
<input type = "file" file-model = "avatarFile"/>
</div>
for file upload i'm using a directive that give me the file as like below
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
and at last my main template code is here
<html lang="en" ng-app="app">
<body ng-controller="lugbeeSPACtrl">
<div ui-view></div>
</body>
</html>
and i'm want to also tell that state A template is also in a separate html file.
if any help is needed regrading to understand this question then please information but please solve my problem. thank you.
angularjs node.js angular-ui-router
asked Nov 21 at 9:33
user979879
157
add a comment |
I'm working on a project using angularjs with nodejs as backend, i'm building a single page application(spa) in angularjs for that.
so, I need your help at one point which is that there are two state for example state A and it's sub state aa (it is related to my project).
all the state share a common controller which is on main template file,
okay.
Now come on the point i want to upload a file code is written in sub state aa template file, when i access that file variable using scope from the controller then i console it undefined. i don't understand why i showing it undefined, but when i apply controller separately on sub state aa then it console the file value. but why it doing so, i don't want that, please anybody help me to out come from this problem.
Here is my code of state aa which is using for file upload
<div>
<input type = "file" file-model = "avatarFile"/>
</div>
for file upload i'm using a directive that give me the file as like below
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
and at last my main template code is here
<html lang="en" ng-app="app">
<body ng-controller="lugbeeSPACtrl">
<div ui-view></div>
</body>
</html>
and i'm want to also tell that state A template is also in a separate html file.
if any help is needed regrading to understand this question then please information but please solve my problem. thank you.
angularjs node.js angular-ui-router
asked Nov 21 at 9:33
user979879
157
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
What does it look like?
– Sophie
Nov 22 at 11:59
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53
add a comment |
I'm working on a project using angularjs with nodejs as backend, i'm building a single page application(spa) in angularjs for that.
so, I need your help at one point which is that there are two state for example state A and it's sub state aa (it is related to my project).
all the state share a common controller which is on main template file,
okay.
Now come on the point i want to upload a file code is written in sub state aa template file, when i access that file variable using scope from the controller then i console it undefined. i don't understand why i showing it undefined, but when i apply controller separately on sub state aa then it console the file value. but why it doing so, i don't want that, please anybody help me to out come from this problem.
Here is my code of state aa which is using for file upload
<div>
<input type = "file" file-model = "avatarFile"/>
</div>
for file upload i'm using a directive that give me the file as like below
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
and at last my main template code is here
<html lang="en" ng-app="app">
<body ng-controller="lugbeeSPACtrl">
<div ui-view></div>
</body>
</html>
and i'm want to also tell that state A template is also in a separate html file.
if any help is needed regrading to understand this question then please information but please solve my problem. thank you.
angularjs node.js angular-ui-router
asked Nov 21 at 9:33
user979879
157
I'm working on a project using angularjs with nodejs as backend, i'm building a single page application(spa) in angularjs for that.
so, I need your help at one point which is that there are two state for example state A and it's sub state aa (it is related to my project).
all the state share a common controller which is on main template file,
okay.
Now come on the point i want to upload a file code is written in sub state aa template file, when i access that file variable using scope from the controller then i console it undefined. i don't understand why i showing it undefined, but when i apply controller separately on sub state aa then it console the file value. but why it doing so, i don't want that, please anybody help me to out come from this problem.
Here is my code of state aa which is using for file upload
<div>
<input type = "file" file-model = "avatarFile"/>
</div>
for file upload i'm using a directive that give me the file as like below
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
and at last my main template code is here
<html lang="en" ng-app="app">
<body ng-controller="lugbeeSPACtrl">
<div ui-view></div>
</body>
</html>
and i'm want to also tell that state A template is also in a separate html file.
if any help is needed regrading to understand this question then please information but please solve my problem. thank you.
angularjs node.js angular-ui-router
angularjs node.js angular-ui-router
asked Nov 21 at 9:33
user979879
157
asked Nov 21 at 9:33
user979879
157
asked Nov 21 at 9:33
user979879
157
asked Nov 21 at 9:33
user979879
157
asked Nov 21 at 9:33
user979879
157
157
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
What does it look like?
– Sophie
Nov 22 at 11:59
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53
add a comment |
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
What does it look like?
– Sophie
Nov 22 at 11:59
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
What does it look like?
– Sophie
Nov 22 at 11:59
What does it look like?
– Sophie
Nov 22 at 11:59
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408993%2fhow-to-manage-multiple-state-using-ui-router-in-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408993%2fhow-to-manage-multiple-state-using-ui-router-in-angularjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you post where your states are set up?
– Sophie
Nov 21 at 16:14
@Sophie my states are in run method in app.js
– user979879
Nov 22 at 6:12
What does it look like?
– Sophie
Nov 22 at 11:59
@Sophie Thank you for your effort, i solved the problem i used rootscope instead of scope to save the file in the directive, so i can access it anywhere. if you know another solution please tell me
– user979879
Nov 24 at 5:53