0

I'm new in AngularJS and I have a problem I can't fix. I am in the index.html page of my application and I let the user click on an icon which send him into another page in this way: 

 <div class="col-sm-2">
     <a href="text.html"> 
         <img src="../icon-modify.png" id="img-mod-1">
     </a>
 </div>

In the second page the user can insert a Title and a Subtitle through the <textarea>tag; after that he can click on a confirm button and come back to the previous page where he can read the title and subtitle just inserted in another custom template thanks to the data binding.

<textarea class="text-area-title-article allWidth  
                 ng-valid ng-touched" ng-controller="EditorController"
                 rows="1" placeholder="Titolo articolo" 
                 ng-model="input.titlearticle2" >
</textarea> 

<div class="col-sm-12 line-3"></div>                         

<textarea class="text-area-subtitle allWidth ng-valid 
                 ng-touched" rows="1" placeholder="SOTTOTITOLO"
                 ng-model="input.subtitlearticle2">
</textarea>

<div class="row">
   <div class="col-sm-12">
        <a href="index.html"> 
            <button type="button" class="btn btn-success" ng-click="setData(input)">
                Success
            </button>
        </a>
    </div> 
</div>

Here the custom element in the first page in which I want to inject the data from the second page: 

 <article-2col titlearticle2="{{input.titlearticle2}}" subtitlearticle2="{{input.subtitlearticle2}}"</article-2col>

Here I have my two controllers (the first one is the first page controller, as the second for the second page):

NewspaperController.js

testApp.controller('NewspaperController',
    function NewspaperController($scope, Article, $log) {  
        $scope.input = Article.getArticleObject(); 
        console.log($scope.input); 
    }

EditorController.js

testApp.controller('EditorController',
    function EditorController($scope, Article, $log) {

        $scope.input = Article.getArticleObject(); 
        $scope.setData = function(ArticleObject){

        if (ArticleObject === undefined ) {
            console.log ("its undefined");
        } else {
            console.log (ArticleObject);
            Article.setArticleObject(ArticleObject);
        }

Here my service Article.js, for the data storage: 

testApp.factory ('Article', function(){
    article =  {}; 

    article.titlearticle2 = 'This is a title'; 
    article.subtitlearticle2 = 'This is a subtitle';

    return {

        setArticleObject: function (articleObject) {
        article = articleObject; 
    },   


    getArticleObject: function () {
        return article;
    }


 }

The problem is that the method setData(input) seems to not work, maybe because I'm passing a wrong object? Moreover, the method getArticleObject() works fine because I initialize the title and the subtitle using the service and it works.

Hope you can help me. Thanks in advance!

Eugene Mihaylin
  • 1,736
  • 3
  • 16
  • 31
Stark_kids
  • 507
  • 1
  • 5
  • 17
  • You're service code seems to be incomplete and not indented correctly. Threw me off for a second. – Will Mar 17 '16 at 16:33
  • thank you, I really don't understand where is the error. – Stark_kids Mar 17 '16 at 18:15
  • Count the number of left curly braces, parenthesis and right ones. It seems you're missing the }). I know semicolons are optional, but it's a good practice to have them also. – Will Mar 17 '16 at 18:18
  • the "})" there is, i've just forgot to put it as part of the code. – Stark_kids Mar 17 '16 at 20:08
  • Can you create jsfiddle for this? – Will Mar 17 '16 at 20:18
  • yes I'll do it. It seems that when the user come back to the first page the NewspaperController do a sort of reset and the render is with the data I've put to initialize ( article.titlearticle2 = 'This is a title'; article.subtitlearticle2 = 'This is a subtitle'; ) – Stark_kids Mar 17 '16 at 20:26
  • Here a plnkr version: http://plnkr.co/edit/ce6YvyIJkzG8v65bN32z?p=info&s=hf9qMtaqnufGF2ku thank you so much. There's no style, but it's only for understand. – Stark_kids Mar 17 '16 at 21:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106654/discussion-between-stark-kids-and-will). – Stark_kids Mar 17 '16 at 21:14
  • 1
    1. You need to move your button inside the div with the ng-controller (that's why setData never fires). 2. You shouldn't have the button inside the a tag. Remove the a tag and set the path via window.location.href or location.path inside the setData function. You may have a problem with persisting data between pages, if so, you need to make your app a single page app in angularjs. Hope this helps – Will Mar 17 '16 at 21:41
  • thank you a lot. You helped me clarify my ideas. I've done the first and the second point of your comment and yes I'm quite sure the problem is that at the moment my app is not a single page app therefore the data aren't persistent between the controllers; i'll fix it. – Stark_kids Mar 18 '16 at 10:47
  • yes, it works now! I created the structure of a single web app and it works fine! Really, thanks. – Stark_kids Mar 18 '16 at 12:55

0 Answers0