对具有不同数据的两个相同 div 使用相同的控制器，对第二个 div 使用 xeditable答案

【问题标题】：Using the same controller for two identical divs with different data and using xeditable for second div对具有不同数据的两个相同 div 使用相同的控制器，对第二个 div 使用 xeditable
【发布时间】：2023-03-22 09:38:01
【问题描述】：

所以我试图复制部分 div（所以我可以有多个部分和多篇文章）。我尝试对两个 div 使用相同的控制器，如下所示。因此，我可以通过将其附加到 main 来添加该部分，但我无法编辑第二个 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);
});

抱歉格式化。我还是新手。谢谢！

编辑：我也在尝试使这个动态化，以便用户可以编辑标题和出版商等文本。如何使添加的部分也可编辑？

【问题讨论】：

如果行为完全相同，则应该使用指令。
而且你不应该使用 jquery。
你能解释一下为什么我不应该使用 jquery 吗？我仍在尝试理解角度和东西
您不需要 jquery 来执行点击事件并追加。您可以使用本机 JS。另见angular.element:docs.angularjs.org/api/ng/function/angular.element
@smirkin 除非您在指令中使用 jquery，否则您所做的所有更改都发生在角度上下文之外，这意味着您将失去角度在范围方面所做的所有“神奇”内容，数据绑定等。你应该在这里阅读答案：stackoverflow.com/questions/14994391/…

标签： javascript jquery angularjs x-editable

【解决方案1】：

尝试这种方式，而不是附加它使用角度自然的方式重复 div 又名 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>

【讨论】：

这很好，但是我怎么能编辑第二部分呢？
你能给我一个你正在使用的可编辑代码的链接吗？我不熟悉 xeditable 只是 angular。
github.com/annievuvu/AngularJS-for-newsletter/blob/master/css/…

【解决方案2】：

我得到了答案！因此，我将应用程序应用于 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);
};

【讨论】：