爲一個控制器分割HTML組件導致控制器停止工作

如果我創建兩個div，兩者都由同一個控制器控制，Angular的控制器似乎停止更新我的視圖。爲一個控制器分割HTML組件導致控制器停止工作

我已經把一個裸骨的例子放在一起來演示這一點。查看示例here on JSFiddle最簡單，但我也在下面發佈代碼。

HTML

<div ng-app='App'> 
    <div ng-controller="MyCtrl"> 
     <form> 
      <input type="text" ng-model="search.query"></input> 
      <button ng-click="search.submit()">Submit</button> 
     </form> 
    </div> 
    <div ng-controller="SomeOtherCtrl"> 
     {{sampleText}} 
    </div> 
    <div ng-controller="MyCtrl"> 
     <button ng-click="search.reset()">Reset Form</button> 
    </div> 
</div>

var app = angular.module('App',[]); 

function MyCtrl($scope) 
{ 
    $scope.search = { 
     query : 'foobar', 
     submit : function() { 
      this.query = 'Submitted'; 
      console.log(this.query); 
     }, 
     reset : function() { 
      console.log('resetting'); 
      this.query = ''; 
     } 
    }; 
} 

function SomeOtherCtrl($scope) { 
    $scope.sampleText = 'other controller text'; 
}

提交按鈕工作正常，但是當我點擊Reset按鈕，我看到resetting在控制檯中記錄，但我視圖（表單輸入）不會更新。

這是爲什麼？在我正在開發的一個當前項目中，我不得不這樣做，因爲屬於另一個控制器的某些HTML屬於它們。我該如何解決這個問題？

來源

2013-03-25 xbonez

在'MyCtrl'結尾添加'console.log（$ scope）'，將會看到你正在用不同的作用域ID創建2個獨立的對象實例。可能需要一個服務來處理範圍？中間控制器不能嵌套在'mYCtrl'中？ – charlietfl 2013-03-25 05:03:25

我可以使用服務解決此問題。我希望我不必但似乎這是我唯一的選擇。不幸的是，中間控制器不能嵌套在MyCtrl中，因爲MyCtrl的第一個實例本身嵌套在另一個控制器中。 – xbonez 2013-03-25 06:46:35

angular中的控制器定義實際上是一個Class/Constructor而不是Object。在編譯階段引用HTML控制器中的每個位置，angular使用定義的控制器類創建一個新的控制器對象。因此，您可以使用相同的控制器類來引用多個範圍。

您可能已經聽說過Angular中的服務，這正是您需要使用它來解決它的地方。 search您正在使用的是一個共同的對象，由兩個控制器實例共享（注意類是相同的MyCtrl，但通過放入兩個ng-controller="MyCtrl"，您要求Angular創建兩個MyCtrl實例）。因此，這兩個對象可以訪問兩個不同的作用域，創建它們時，兩個不同的作用域將設置爲兩個不同的搜索對象。當您點擊重置時，其他search對象reset被調用，這意味着在第一個MyCtrl的範圍內沒有任何反應。這就是爲什麼你的代碼不能按預期工作的原因。

現在請注意，在角度服務是單身。所以如果你在多個地方引用它們，你可以訪問同一個對象。所以，在不同的控制器（實例）中重置將仍然重置相同的對象。

這是一個與您的代碼一起工作的plunk。

http://plnkr.co/edit/zynAdS9hg8DUZDnlnYFm?p=preview

來源

2013-03-25 10:03:33 ganaraj

感謝您解釋得那麼好。我最終確實使用了一個服務來連接兩個實例，就像你所做的一樣。 – xbonez 2013-03-25 11:14:01