AngularJS:在同一指令的多个实例之间共享范围 [英] AngularJS: Sharing scope between multiple instances of same directive

问题描述

我正在编写一个应用程序，它在多个地方使用同一个表和相同的数据.我创建了一个自定义指令，允许我重用这个表.不幸的是，如果我在一个实例中编辑表，另一个实例不会刷新.如何将这两个链接起来，以便我对其中一个所做的任何编辑显示在另一个中?

解决方案

听起来您已经基本明白了，困难的部分是将您的数据整理成可以通过幻灯片共享视频和照片的形状.我建议在由 Angular 中的单独工厂返回的共享数据访问对象中执行此操作，而不是直接在作用域中执行此操作.如果有帮助，我有 Plunkr 中的示例.

该示例具有绑定到共享数据的指令，从工厂检索为注入两个单独作用域的对象.在您的情况下，您必须添加从服务器检索数据的方法，并将其整形以进行显示.

testApp.factory("新闻", [function () {var 新闻 = {故事":[{"date": new Date("2015-03-01"), "title": "事情发生了"},{"date": new Date("2015-02-28"), "title": "坏天气来了"},{"date": new Date("2015-02-27"), "title": "狗咬人"}],addStory":函数(标题){var 故事 = {日期":新日期()，标题":标题};news.stories.push(story);}};返回消息；}]);

两个控制器都为数据引用了同一个工厂:

testApp.controller("FirstController",["$scope", "News", function ($scope, news) {$scope.news = 新闻；}]);testApp.controller("SecondController",["$scope", "News", function ($scope, news) {$scope.news = 新闻；}]);

然后视图将数据传递给新闻列表指令，该指令既共享数据又保持指令相对笨拙.

 
<news-list news="news" title="'First List'"></news-list>
<div ng-controller="SecondController"><news-list news="news" title="'第二列表'"></news-list>

news-list 指令在这个例子中只是愚蠢的格式:

testApp.directive("newsList",功能() {var 指令 = {"限制": "E",替换":假，"templateUrl": "news-list.html",范围": {"新闻": "=新闻",标题":=标题"}};返回指令；});

查看模板:

<p>{{title}}</p><ul><li ng-repeat="news.stories 中的故事 | orderBy:'date':true">{{story.date |日期:'短'}}:{{story.title}}</li><表格><input type="text" id="newTitle" ng-model="newTitle"/><button ng-click="news.addStory(newTitle)">添加</button></表单>

I'm writing an app that uses the same table with the same data in multiple places. I created a custom directive that allows me to reuse this table. Unfortunately, if I edit the table in one instance, the other instance does not refresh. How do I link these two so that any edits I make to one show up in the other?

解决方案

It sounds like you've mostly figured it out, the hard part is getting your data into a shape where the videos and photos can be shared by the slide show. I recommend doing this in a shared data access object returned by a separate factory in Angular, rather than directly in a scope. I've got a sample in Plunkr if it helps.

The sample has a directives that binds to shared data, retrieved from a factory as an object injected into two separate scopes. In your case, you would have to add methods to retrieve data from the server, and shape it for display.

testApp.factory("News", [function () {
  var news = {
    "stories": [
      {"date": new Date("2015-03-01"), "title": "Stuff happened"}, 
      {"date": new Date("2015-02-28"), "title": "Bad weather coming"},
      {"date": new Date("2015-02-27"), "title": "Dog bites man"}
    ],
    "addStory": function (title) {
      var story = {
        "date": new Date(),
        "title": title
      };
      news.stories.push(story);
    }
  };
  return news;
}]);

Both controllers reference the same factory for the data:

testApp.controller("FirstController", 
  ["$scope", "News", function ($scope, news) {
    $scope.news = news;
}]);

testApp.controller("SecondController", 
  ["$scope", "News", function ($scope, news) {
    $scope.news = news;
}]);

Views then pass the data into to the news list directive, which both shares the data and keeps the directive relatively dumb.

  <div ng-controller="FirstController">
    <news-list news="news" title="'First List'"></news-list>
  </div>
  <div ng-controller="SecondController">
    <news-list news="news" title="'Second List'"></news-list>
  </div>

The news-list directive is just dumb formatting in this example:

testApp.directive("newsList", 
  function() {
    var directive = {
      "restrict": "E",
      "replace": false,
      "templateUrl": "news-list.html",
      "scope": {
        "news": "=news",
        "title": "=title"
      } 
    };
    return directive;
});

View template:

<div class="news-list">
  <p>{{title}}</p>
  <ul>
    <li ng-repeat="story in news.stories | orderBy:'date':true">{{story.date | date:'short'}}: {{story.title}}</li>
  </ul>
  <form>
    <input type="text" id="newTitle" ng-model="newTitle" />
    <button ng-click="news.addStory(newTitle)">Add</button>
  </form>
</div>

这篇关于AngularJS:在同一指令的多个实例之间共享范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！