使用AngularJS的多個視圖中的相同數據

也許有人能夠幫助我一點點。我必須在多個視圖之間共享數據。因爲它是一個學校項目，所以我必須使用AngularJS，但我對它很陌生，我不知道從哪裏開始。該程序的工作原理如下：使用AngularJS的多個視圖中的相同數據

用戶（客戶）可以在餐廳預訂餐桌。（第一頁）

用戶（員工）可以將訂單添加到保留表中。（第二頁）

當客戶從第一頁預訂一張表時，該表被添加到第二頁，以便員工可以向其添加訂單。

也許有人在我的路上可以幫助我一點點。

來源

2013-05-22 P Griep

我開始用角網站上的教程。它非常相似：它有一個模型，它顯示了雙向數據綁定角度提供的功能。 –

AngularJS在網站上的教程doens't幫助我。我搜索了網絡，發現在多個視圖之間共享數據的最佳方式是一項服務。你同意嗎？或者你知道另一種在視圖之間共享數據的方式嗎？ –

是的，這是一個好方法。例如，如果您想在您的應用中使用設置，則可以將它們放入rootScope或服務中。服務絕對是更好的解決方案。然而，你正在談論一個模型，而這看起來不像你在服務中放置的東西。普通的舊javascript對象在這裏似乎很有用，但我無法確定地告訴你。檢查這也http://stackoverflow.com/questions/16331102/rootscope-vs-service-angular-js/16332680#16332680我們討論的東西simmilar前幾天:) –

由於您是angularjs的新手，更簡單的方法是使用$ rootScope在您的控制器（以及與其相關的視圖）之間共享數據。

下面是一個例子：

angular.module('MyApp', []) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: '/views/main.html', 
     controller: 'MainCtrl' 
    }) 
    .when('/first-page', { 
     templateUrl: '/views/first.html', 
     controller: 'FirstCtrl' 
    }) 
    .when('/second-page', { 
     templateUrl: '/views/second.html', 
     controller: 'SecondCtrl' 
    }); 
}]) 

.controller('MainCtrl', ['$rootScope', function ($rootScope) { 
    // Will be available everywhere in your app 
    $rootScope.users = [ 
    { name: 'Foo' }, 
    { name: 'Bar' } 
    ]; 
}]) 

.controller('FirstCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) { 
    // Only available inside first.html 
    $scope.bazUser = { name: 'Baz' }; 
    // Add to global 
    $rootScope.users.push($scope.bazUser); 
}]) 

.controller('SecondCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) { 
    console.log($rootScope.users); // [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }]; 
}]);

內second.html例如

<ul> 
    <li ng-repeat="user in users">{{user.name}}</li> 
</ul>

來源

2013-05-22 14:32:49 SergeL

我有點困惑。爲什麼可用的主控制器是？因爲你使用$ rootScope，它會告訴用戶的數組，可用於所有人？ –

對不起，如果評論混淆你。主控制器僅在'/'路徑上調用（當main.html呈現時）。您引用的$ rootScope就像您可以從任何其他控制器引用的單例。所以你可以在你的應用中使用以前添加的對象（和它們的值）。好處是，添加到$ rootScope中的所有東西也可以立即在所有視圖中使用（即使視圖根本沒有控制器），並且您沒有定義它。服務/工廠也是一個不錯的選擇，尤其是當您的應用程序擴展時。 – SergeL

我想我現在明白了rootScope。使用rootScope是個好主意，因爲我的應用程序很小並且保持較小。當我計劃製作更大的應用程序或可擴展的應用程序時，服務或factorie是更好的選擇。 –

服務是單例，所以當服務被第一次注入時，工廠中的代碼被調用一次。我假設你有一個路由表，因爲你正在談論多個頁面。

如果你定義了這個

angular.module('services', []) 
.factory('aService', function() { 
    var shinyNewServiceInstance; 
    //factory function body that constructs shinyNewServiceInstance 
    shinyNewServiceInstance = shinyNewServiceInstance || {foo:1}; 
    return shinyNewServiceInstance; 
});

依賴注入到你的控制器（簡體）：

controller('ACtrl', ['aService', function(aService) { 
    aService.foo += 1; 
}]); 

controller('BCtrl', ['aService', function(aService) { 
    aService.foo += 1; 
}]);

如果你每次ACtrl & BCtrl之間的導航時間檢查aService.foo，你會看到該值已增加。合乎邏輯的原因是您的手中有同樣的shinyNewServiceInstance，所以您可以在第一頁&的散列中設置一些屬性在第二頁中使用它。

來源

2013-05-22 10:17:19

謝謝，我認爲這可以幫助我很多！ –

不客氣！ –

正確答案。謝謝！ –

使用AngularJS的多個視圖中的相同數據

回答

相關問題