Angular js - 跨多個html頁面回顯數據

我已經使用過許多語言和環境（主要是iOS & C＃），並一直設法避免使用腳本語言。這種避免條件已經戛然而止：隨着一個巨大的項目被扔在我的腿上 - 現在我正在爭先恐後地理解這個非常陌生的世界。有些功能非常酷，其他技術讓我徹底困惑。我花了數週的時間閱讀教程，學習示例，並且仍然無法解決關於代碼最佳實踐和結構的相對簡單的問題。Angular js - 跨多個html頁面回顯數據

這是我需要做的事情：我有一個表單，用戶將輸入數據（出於參數的緣故，它的兩個數字類型字段。）我需要在頁面頂部有一個橫幅兩個輸入字段的總和 - 本身相對容易 - 但對我而言，問題是在後續頁面上重複此橫幅。

首頁頁面將包含指向：

page 1 
    page 2

2頁的鏈接將無法使用，直到第1頁上的用戶輸入數據，迫使用戶訪問第1頁，第一。橫幅元素需要是一個單獨的文件。第2頁是數據的被動顯示，第1頁只是可以主動編輯數據的頁面。

第1頁：應該是這樣的 -

banner.html (sum of fields A & field B) 

input field A 
input field B

第2頁：

banner.html (sum of field A & field B) 

Lorem Ipsum ....

什麼是實現這一任務的最佳方法是什麼？

來源

2015-11-06 Megan C

您可以使用橫幅上方的索引頁和使用相同控制器的部分。橫幅的值將是一個控制器變量。

要在索引頁面內使用partials，您需要包含ngRoute模塊以及鏈接到它的腳本標記。

你會有這樣的div。

<div ng-view=""></div>

您將看到類似於此的partialRoutes.js文件。

myApp.config(function($routeProvider){ 
    $routeProvider 
    .when('/',{ 
     templateUrl: './partials/things.html' 
    }) 
    .when('/stuff',{ 
     templateUrl: './partials/stuff.html' 
    }) 
    .when('/otherstuff',{ 
     templateUrl: './partials/otherstuff.html' 
    }) 
    .otherwise({ 
     redirectTo: '/', 
    }) 
});

當你包含ngRoute它看起來像這樣。

var myApp = angular.module('myApp', ['ngRoute']);

這裏是ngRoute的文檔。希望我幫助。

https://docs.angularjs.org/api/ngRoute

來源

2015-11-06 19:03:20 carterw485

感謝您指點我正確的方向。對此，我真的非常感激。 –

-1

如果這兩個網頁有相同的控制器，那麼$範圍可以用來實現這一目標。如果頁面具有不同的控制器，則可以使用$ rootScope共享變量。

來源

2015-11-06 19:04:33 ravi

就我個人而言，我會有一個服務，讓我們叫它userData。然後您的inputController會將輸入的詳細信息寫入userData服務。

你bannerController然後將（通過$watch或$broadcast）

當您切換頁面bannerController不應該改變，仍然會顯示此信息這種方式變更的通知在userData服務的數據的

備註：這依賴於您使用某種AngularJS路由技術，如NGroute或UI路由器。如果進行了硬頁面導航，那麼userData將不得不存儲在服務器端。

它可能是更好的爲旗幟，以留任何ui-view所以外界認爲它是由導航未受影響，但如果它是那麼的userData服務仍然活着並保持正確的數據時，它被重新將有訪問相同的數據

來源

2015-11-06 19:13:50 Chris

你給了我很多很好的想法 - 我確信自己在某一點上確實需要用指令來解決這個問題，但是你的方法似乎簡單得多，因此更容易。 –

這很好..作爲一個經驗法則，總是使用服務在控制器之間共享數據。一旦你開始思考這種方式，它變得更加容易:) – Chris

問題：在創建服務以簡單地在控制器之間共享數據片段時，我是否需要將此服務定義爲工廠？你推薦我讀什麼關於服務和IIFE格式？非常感謝讓我選擇你的大腦。 –

Angular js - 跨多個html頁面回顯數據

回答

相關問題