使用相同的控制器爲兩個相同的div與不同的數據和使用可編輯的第二個div

所以我試圖複製節div（所以我可以有多個文章的多個部分）。我試圖使用相同的控制器爲兩個div如下所示。所以我可以通過將它添加到main來添加該部分，但我無法編輯第二個div。有沒有辦法解決？使用相同的控制器爲兩個相同的div與不同的數據和使用可編輯的第二個div

我不使用引導程序，我使用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); 
});

道歉格式。我還是這個新手。謝謝！

編輯：我也試圖使這種動態，使用戶可以編輯文本，如標題和出版商等。我怎樣才能使添加的部分也可編輯？

來源

2015-06-17 smirkin

如果是完全一樣的行爲，你應該使用指令代替。 –

而且你也不應該使用jQuery。 –

你能解釋爲什麼我不應該使用jQuery嗎？我仍然試圖瞭解角度和東西 – smirkin

嘗試這種方式，而不是進行附加使用angulars重複的div又名NG-重複的自然的方式：

<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>

來源

2015-06-17 21:18:59 oMiKeY

這將是偉大的，但那麼我將如何能夠編輯第二部分？ – smirkin

你可以給我一個鏈接到你使用的xeditable代碼嗎？我對可編輯的角度並不熟悉。 – oMiKeY

https://github.com/annievuvu/AngularJS-for-newsletter/blob/master/css/xeditable.css – smirkin

我得到了答案！所以我將應用程序應用於html文檔和控制器，而不是主div，並製作了一系列部分，而不是單個部分。我爲div部分做了一個ng-repeat。通過這樣做，我添加了一個「addsection」函數，用於創建要添加到數組中的部分，並且該部分必須具有與其他部分相同的屬性，包括空的文章數組。

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); 
};

來源

2015-07-02 19:11:49 smirkin

使用相同的控制器爲兩個相同的div與不同的數據和使用可編輯的第二個div

回答

相關問題