爲什麼在Angular JS中不能使用兩個控制器？

Question

我已經控制器在頁面頂部命名"UserController"：

<div ng-controller="UserController"><input type="text" ng-model="search"></div> 

另外在底部頁相同的控制器從指令ng-view：

<div class="bottom" ng-controller="UserController">{{search}}</div> 

爲什麼我沒有在底部獲得價值{{search}}，當我在頂部填充字段輸入？

Answer 1

我可以在頁面中兩次使用一個控制器嗎？

是的，你可以在AngularJs中使用兩個控制器，Here是一個演示。

當我使用ng-controller時會發生什麼？

當您添加NG控制器DOM元素，棱角分明的創建控制器功能的實例，並與DOM重視它，這就是爲什麼沒有雙向這些div之間的數據綁定。

如何使用數據綁定在控制器之間共享數據？

您可以使用$rootScope變量或者您可以使用服務。

您可以創建服務並將其作爲依賴項注入控制器，因此您可以使用雙向綁定功能訪問其屬性。

Answer 2

正如JB Nizet所說，您需要將所有內容都放在同一個「div」中。

<div ng-controller="UserController"> 
    <input type="text" ng-model="search"> 
    <div id="search-query">{{search}}</div> 
</div> 

具有search-query在頁面的底部是CSS，沒有棱角的問題。

Answer 3

控制器不是單身人士。你有一個控制器的頂部div，第二個div的第二個控制器。頂部div的一個範圍，底部div的一個範圍。

這兩個控制器都有相同的名稱，但是您最後一次將控制器函數調用兩次。

你可能要考慮解決你的問題的一些選項：

選項1）使用父範圍。

ng-model="$parent.search" 
{{$parent.search}} 

選項2）使用根範圍。

ng-model="$root.search" 
{{$root.search}} 

選項3）在服務存儲該值。

服務是單身人士。如果您鍵入myService.search = $scope.search，則該值可以從另一個控制器讀取。
你不會看到一個服務變量，所以也許你想在這裏使用觀察者模式。

app.service("search", function() { 
    var listerners = []; 
    this.register = function(listener) { 
     listerners.push(listener); 
    }; 
    this.update = function(searchValue) { 
     for(var i in listerners) { 
      listerners[i](searchValue); 
     } 
    }; 
}); 

app.controller("UserController", function($timeout, search){ 
    search.register(function(searchValue) { 
     $timeout(function(){ 
      $scope.search = searchValue; 
     }); 
    }); 
    $scope.$watch('search', function (newVal, oldVal, scope) { 
     search.update(newVal); 
    }); 
}); 

選項4）廣播新值。

$scope.$watch('search', function (newVal, oldVal, scope) { 
    $rootScope.$broadcast('search', newVal); 
}); 
$scope.$on('search', function(event, data) { 
    $scope.search = data; 
}); 

Answer 4

在頁面中可以有多個相同控制器的實例。他們共享相同的功能。但是該控制器的每個實例都獲得了他自己的$範圍。所以在你的第一個控制器$ scope.search可以是'mySearch'，但第二個控制器不會得到這個，因爲它是另一個$ scope。

你可以做兩件事： 你可以把控制器放在一個包含元素，比方說正文，所以你的輸入和你的div都在同一個$範圍內。

或者，如果您希望它們分開，您可以使用服務共享搜索。

你的HTML：

<div ng-app="myApp"> 
    <div ng-controller="UserController"> 
     <input type="text" ng-model="search.mySearch"/> 
    </div>  
    <div ng-controller="UserController"> 
     {{search.mySearch}} 
    </div> 
</div> 

你的JavaScript：

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


myApp.factory('Data', function(){ 
    return { mySearch: '' }; 
}); 

myApp.controller('UserController', function($scope, Data){ 
    $scope.search = Data; 
}); 

See Fiddle