AngularJS：如何使用$ route.reload（）更新ng-view

Question

我已經搜索了很多關於$ route.reload（）的問題，我想我仍然對它和Angular實際工作有一個基本的誤解。我真的很想理解實際發生的事情（不僅僅是一個快速解決方案），所以我很抱歉如果這個問題變得比較冗長。

我試圖創建一個應用程序，允許用戶將信息輸入到一個表格，然後使用NG-視圖和控制器LivePreviewController形式的「實時預覽」顯示錶單數據它具有一些獨特的樣式和與用戶不輸入自己的表單相關的其他信息。

這是很簡單的，如果「即時預覽」是在同一頁上出現的用戶使用的是類似這樣的

<input type="text" ng-model="form_name" /> 
<div ng-bind="form_name"></div> 

東西，我想什麼做的輸入信息是這樣做的。

<!--Location is: localhost:8888/form_page.html --> 
<input type="text" ng-model="form_name" /> 

<!-- ng view is displaying the partial view: styled_form.html --> 
<div ng-view></div> 

然後我有另一個頁面styled_form.html是由ng-view div顯示的局部視圖。

<!-- partial view page is styled_form.html --> 
<div ng-bind="form_name"></div> 

這些網頁的兩個由相同控制器LivePreviewController控制。

有很多事情我想象我可能做錯了。首先可能是路由。我在路由方面遇到了一些問題，因爲應用僅在多頁網站的一頁上使用，我的路由設置如下。

var previewApp = angular.module('previewApp', ['ngRoute']); 
previewApp.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
     .otherwise({ 
      redirectTo:'/styled_view.html', 
      controller: 'LivePreviewController' 
     }); 
}]); 

//Controller Code 

previewApp.controller('LivePreviewController', [$scope, $route, function($scope, $route){ 
    $scope.form_name = 'temporary name'; 
}]); 

所有這一切工作最初加載form_page.html時不如預期，但是當用戶在文本輸入更名顯示我styled_form.html頁NG-視圖沒有改變。這也是有道理的，因爲styled_form.html需要重新加載新信息。

這裏是noob開始的地方。我的第一個傾向是創建一個刷新按鈕，並在我的LivePreviewController增加一個功能使用$ route.reload（）

previewApp.controller('LivePreviewController', [$scope, $route, function($scope, $route){ 
    $scope.form_name = 'temporary name'; 

    $scope.refreshPage = function() { 
     $route.reload(); 
     console.log($scope.form_name) //to ensure scope is updating 
    }; 

}]); 

刷新頁面，然後更新我的HTML，包括按鈕如下

<!--Location is: localhost:8888/form_page.html --> 
<input type="text" ng-model="form_name" /> 

<button ng-click="refreshPage()"> Update the Page </button> 

<!-- ng view is displaying the partial view: styled_form.html --> 
<div ng-view></div> 

當按鈕被點擊並且更新後的範圍變量顯示在控制檯中時，該函數正常工作，但是我的實時預覽沒有更新。看完Angular文檔後，我對於發生的事情有了一種預感。它陳述...

導致$ route service重新加載當前路由，即使$ location沒有改變。

因此，ngView創建新的範圍並重新實​​例化控制器。

因此，如果我正確理解文檔，我明顯不瞭解，$ route上實際發生了什麼。reload（）是當styled_form.html被重載時，更新後的$ scope.form_name將被清除，原始的$ scope值將顯示在頁面上。所以...

問題1：我理解這個正確的，即$ route.reload（）抹掉我的$範圍和重新加載舊的$範圍變量，或者是我的$ route.reload（）只是沒有重新加載頁面？

現在，如果我正確解釋我的問題，我的猜測（見其他主題中的建議）是解決方案是創建某種類型的服務來存儲我的數據，然後在控制器內調用該服務。此工作流將類似於

用戶輸入 - 存儲在某種服務（工廠）>數據 - >數據傳遞給$範圍 - 在局部視圖（styled_form.html）顯示>> $範圍值

但我失去了如何動態地存儲服務內的用戶輸入。理想情況下，這將全部實時發生（就像第一個簡單示例一樣），因爲我想避免使用刷新按鈕。這可以通過在我的控制器中創建一個函數來實現，該函數每隔幾秒更新一次服務中的值。我需要一個比我自己有更好想法的人來指引我朝着正確的方向前進。

問題2：這是正確的工作流假設Q1是正確的，如果是的話是什麼來建立我的服務來處理用戶輸入並動態地傳遞到另一個HTML頁面的正確方法是什麼？

所有幫助非常感謝

Answer 1

有一個服務來存儲數據和同一個控制器同時服務的觀點是好的。

當控制器變量發生變化時，每次都可以完成數據保存。

當新控制器初始化時，它從服務中讀取日期。將爲每個視圖創建一個單獨的控制器實例。

你也可以檢查這個博客上看到，如何將數據應該在服務中進行定義，以便改變這樣的數據將自動觸發控制器來更新視圖：

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

注意：該服務回報數組和控制器的引用會在創建時保存該引用。

Answer 2

好了，所以我意識到我的問題是由於我誤解$ scope在Angular中的工作方式，而不是$ route.reload（）如何工作。本主題

$scope variable not changing in controller when changed using directive

而這個鏈接在這個問題

https://github.com/angular/angular.js/wiki/Understanding-Scopes

幫助我理解我在做什麼錯。 $ route.reload（）和$ templateCache.remove（）工作正常。問題是我的$ scope變量沒有正確更新，因爲每個視圖都創建了一個不同的範圍。解釋其中一個鏈接

$ scope不是模型。

控制器的功能是從模型寫入範圍

的視圖的功能是顯示了$範圍，如果需要

寫入模型我解決了這個問題使用這樣的答案討論的controllerAS語法，

.controller('LivePreviewController',['$scope', function($scope) { 
    var vm = this; 
    vm.form_name = 'temporary name'; 
}]); 

<!-- form_page.html --> 
<div ng-controller="LivePreviewController as ctrl"> 
    <input type="text" ng-model="ctrl.form_name> 

在我的風格形式局部視圖

<!-- styled_form.html --> 
<div> {{ctrl.form_name}} </div> 

這使一切工作按預期