0

So I'm trying to duplicate the section div (so I can have multiple sections with multiple articles). I tried using the same controller for both divs as shown below. So I'm able to add the section by appending it to main but I can't edit the second div. Is there any way around this?

I am not using bootstrap and i'm using xeditable.

HTML:

    <div id="main" ng-app="main">
       <div class = "section" ng-controller="newsController">
          <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
          <div class = "article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
             <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
             <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
             <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
          </div>
          <div class = "section" ng-controller="newsController">
          </div>
   </div>

JS:

newsletter.controller('newsController',function($scope){

$scope.sections =  {
    section: "Faculty",
    articles: [
        {
            title: "In __ We Trust",
            link:'http://wee.com',
            publisher: "Me",
            orig_title:"",
            description: "Description Here"
        }
    ]
};
$scope.addItem = function(){
    $scope.sections.articles.push(this.sections.articles.temp);
    $scope.sections.articles.temp={};
};
)};

   var newSection = '//Pretend all the tags and the attributes as above are placed here'
   $("#add-section").click(function(){
      var $section = $('#main').append(newSection);
});

Apologies for formatting. I'm still new to this. Thanks!

Edit: I'm also trying to make this dynamic so the user could edit the texts like the title and the publisher, etc. How would I make the added section also editable?

smirkin
  • 3
  • 3
  • 1
    If it is exactly the same behaviour, you should be using a directive instead. – Joao Leal Jun 17 '15 at 20:29
  • And also you shouldn't be using jquery. – Joao Leal Jun 17 '15 at 20:31
  • Can you explain why I shouldn't be using jquery? I'm still trying to understand angular and stuff – smirkin Jun 17 '15 at 20:35
  • You don't need jquery to do a click event and append. You can use native JS. Also see `angular.element`: https://docs.angularjs.org/api/ng/function/angular.element – Tony Barnes Jun 17 '15 at 20:48
  • @smirkin unless you use jquery inside a directive, all the changes you make are happening outside the angular context, meaning that you will lose all the 'magic' stuff that angular does in regards to the scopes, data binding, etc.. You should read the answers here: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542 – Joao Leal Jun 17 '15 at 22:54

2 Answers2

0

Try it this way, instead of appending it uses angulars natural way of repeating divs aka ng-repeat:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.sections = {
            section: "Faculty",
            articles: [{
                title: "In __ We Trust",
                link: 'http://wee.com',
                publisher: "Me",
                orig_title: "",
                description: "Description Here"
            }]
        };
        $scope.addItem = function() {
            $scope.sections.articles.push(this.sections.articles.temp);
            $scope.sections.articles.temp = {};
        };
        var newSection = '//Pretend all the tags and the attributes as above are placed here'
        $("#add-section").click(function() {
            var $section = $('#main').append(newSection);
        });
    });
</script>
<div id="main" ng-app="myApp" ng-controller="myCtrl">
    <div class="section" ng-repeat="i in ['0','1']">
         <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>

        <div class="article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>

            <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
            <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
            <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
        </div>
        <div class="section" ng-controller="myCtrl"></div>
    </div>
omikes
  • 8,064
  • 8
  • 37
  • 50
0

I Got the answer! So I applied the app to the html document and the controller to the body as opposed to the main div and made an array of sections as opposed to a singular section. I did a ng-repeat for the section div. By doing so, I added a "addsection" function where I create a section to be added to the array and the section has to have the same properties as the other ones including an empty array of articles.

HTML:

<body ng-controller="newsController">
   <ul id="convenient-buttons">
       <li id="add-section"><a href=# id="add-section" ng-click="addSection()">Add Section</a></li>
       <li><a href=# id="copy" onclick="selectText('main')">Select All</a></li>
            <li><a href=# id="export" onclick="selectText('json')" ng-mouseenter="showJson=true" ng-mouseleave="showJson=false" >Send to Server</a></li>
   </ul>
   <div id="main">
       <div class = "section" ng-repeat="section in news.sections" >
          <h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
          <div class = "article" ng-repeat="article in sections.articles">
             <h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
             <p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
             <p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
             <p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
          </div>
   </div>
</body>

JS:

 $scope.news =  {
    sections: [
        {
            title: "Faculty",
            articles: [
                {
                    title: "In Memoriam: Eli Pearce",
                    link:'http://engineering.nyu.edu/news/2015/05/29/memoriam-eli-pearce',
                    publisher: "NYU Newsroom",
                    orig_title:"   ",
                    description: "When <strong>Professor Eli Pearce</strong> passed away on May 19, 2015, a slice of Poly history passed along with him. Pearce had been affiliated with the school, then known as the Polytechnic Institute of Brooklyn, since the mid-1950s, when he conducted his doctoral studies in chemistry here. As a student, he learned with such luminaries as Herman Frances Mark, who is often called the Father of Polymer Science, and Charles Overberger, another influential chemist who helped establish the study of polymers as a major sub-discipline."
                }
            ]
        }
    ]
};
$scope.addSection = function(){
    $scope.news.sections.temp={
        title: "Section Title",
        articles:[
        //  {
        //      title:"Article Title",
        //      link:"Link",
        //      publisher: "Publisher",
        //      orig_title: "Original Title",
        //      description: "Description"
        //  }
        ]
    };
    $scope.news.sections.push(this.news.sections.temp);
};
smirkin
  • 3
  • 3