角JS - 當一個輸入是內部NG-視圖和其他輸入內部更新NG-模型NG-包括

Question

這個問題的Angular JS - Update input options with other input options

擴展我有兩個ng-model輸入（輸入選項），一個是內部的ng-view，另一個是ng-include。我想在更改時保持更新，所以兩者顯示的值始終相同。

當兩個輸入處於同一級別時，代碼正在工作。當一個輸入在ng-include內時，我設法通過將$parent添加到ng-model範圍內，但是當將其他輸入放入ng-view時，我無法設法使其工作。你可以檢查我的代碼in this plunkr

Answer 1

編輯：我覺得我的意見與我以前的迴應，因爲它基本上是「你錯了，按我的方式」，所以這裏是對問題的解釋。

你有一個設置ng-ctrl的div。這個div現在有一個範圍，其實例爲myCtrl。

ng-include創建一個子範圍，它從其父範圍（以前創建的myCtrl範圍）繼承。此作用域不會直接引用selectedCountry或countries，，但角度會在未找到值時自動搜索父級作用域。 這是重要的。 （這是JavaScript原型繼承的工作原理。更多信息here。）

您還有一個ng-view，在您的路由提供程序中，您告訴它已將其控制器設置爲myCtrl。這意味着它將創建一個單獨的myCtrl範圍，這也是外部範圍的子範圍。由於它是myCtrl範圍外的孩子，就像你的ng-include作用域一樣，angular通常會搜索其父級在其直接作用域上找不到的屬性。

然而，這是它變得複雜。在這種情況下，因爲它也是myCtrl的另一個實例，所以它自己創建了selectedCountry和countries的新屬性，因此在引用它們時不需要搜索其父項的屬性。角匹配參考對象，而不是由一個深對象比較，因此這些對象都被認爲是不同並從列表中選擇一個事改變selectedCountry到不上列表B.存在的對象的參考

這就是爲什麼你不得不使用$parent來嘗試指向與其外部範圍相同的引用，而你的ng-include通過它的父級自動引用它。

與您的代碼的第二個問題，就是同時你的selectedCountry值使用$parent，你沒有不使用$parent爲countries陣列，因此它使用的的孩子，被重新創建的對象的數組myCtrl填寫您的選擇框。同樣，即使對象具有相同的值，角色也會通過參考ng-options進行比較。因此選擇A上的Modor與選擇B上的Modor不同。

作爲附加說明，如果您沒有爲selectedCountry上的menu.html和checkout.html設置$parent，還可以創建第三個問題。雖然最初它會搜索父項selectedCountry，但如果您更改了選擇項，它將在子範圍上創建一個屬性，而不是冒泡到父項，因此從此不再匹配父項的selectedCountry版本。

因此，爲了總結，你已經編碼它的方式，你有兩個選擇。

的胡扯選擇：

• $parent.everything
• 這裏是一個$parent固定Plunkr一切（請不要這樣做）

負責任的選擇：

• 使用controllerAs永遠阻止範圍問題
• 下面是我如何與controllerAs

做一個Plunkr爲controllerAs簡要指南是here

TL; DR;如果你不想讀指南

• 在你的HTML - >ng-controller="myCtrl as myCtrl"
• 另外在你的HTML - >myCtrl.countries
• 如果這是一個路由/指令，設置該屬性 - >controllerAs: 'myCtrl'
• 在你的控制器，而不是$scope.stuff - >this.stuff
  • 注：this用於屬性/功能分配。如果您使用$scope功能，如$watch，則仍在$scope上完成。

只是作爲一個額外的小費，這是我bible對角編碼。遵循這些準則，您的代碼將完美無瑕，並防止您遇到這些類型的缺陷。