为什么在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