AngularJS:同一指令的多个实例之间共享范围 [英] AngularJS: Sharing scope between multiple instances of same directive
问题描述
我正在写使用相同的表在多个地方的相同数据的应用程序。我创建了一个自定义的指令,让我重新使用此表。不幸的是,如果我在一个实例编辑表格,其他实例不会刷新。如何链接这两个让我做一个任何编辑在其他显示?
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?
推荐答案
这听起来像你大多是想通了,最困难的部分是让你的数据,如果相应的视频和照片可以通过幻灯片共享的形状。我建议在通过角一个单独的工厂返回的共享数据访问对象这样做,而不是直接在一个范围内。我有一个样品中Plunkr 如果它帮助。
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;
});
查看模板:
<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屋!