AngularJS：在同一指令的多個實例之間共享範圍

Question

我正在編寫一個應用程序，該應用程序在多個位置使用具有相同數據的同一個表。我創建了一個自定義指令，允許我重用此表。不幸的是，如果我在一個實例中編輯表，另一個實例不刷新。我如何鏈接這兩個，以便我對其中的任何編輯都顯示在另一箇中？

Answer 1

這聽起來像你主要想到它，困難的部分是讓你的數據變成一個形狀，其中的幻燈片可以共享視頻和照片。我建議在由Angular中的單獨工廠返回的共享數據訪問對象中執行此操作，而不是直接在範圍內執行此操作。如果有幫助，我有sample in Plunkr。

該示例具有綁定到共享數據的指令，作爲注入到兩個單獨作用域中的對象從工廠檢索。在你的情況下，你將不得不添加方法來從服務器檢索數據，並對其進行整形以供顯示。

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

兩個控制器引用同一個工廠中的數據：然後

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

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

視圖中的數據傳遞到新聞列表指令，這兩個共享的數據，並保持相對指令啞。

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

新聞列表指令是在這個例子只是愚蠢的格式：

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>