Question

我的控制器在页面顶部名为#include<iostream> using namespace std; struct name { char full_name[75]; int number; }; void input(struct name data[]) { int i=0; while(i<5) { cout<<"Enter the name: "; fgets(data[i].full_name,75,stdin); OR cin.getline(data[i].full_name,75) cout<<"Enter the number: "; cin>>data[i].number; i++; } } int main() { int times=0; struct name data[5]; input(data); }：

"UserController"

指南<div ng-controller="UserController"><input type="text" ng-model="search"></div>底页中的同一个控制器：

ng-view

当我在顶部填写字段输入时，为什么我在底部不会获得值<div class="bottom" ng-controller="UserController">{{search}}</div>？

Answer 1

正如JB Nizet所说，你需要把所有东西都放在同一个＆＃34; div＆＃34;。

cache:clear

页面底部有<div ng-controller="UserController"> <input type="text" ng-model="search"> <div id="search-query">{{search}}</div> </div>是CSS的问题，而不是Angular。

Answer 2

我可以在一个页面中使用一个控制器两次吗？

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

使用ng-controller时会发生什么？

当你将ng-controller添加到DOM元素时，angular创建一个控制器函数的实例并将其与该DOM相连，这就是为什么这些div之间没有双向数据绑定的原因。

如何使用数据绑定在控制器之间共享数据？

您可以使用$rootScope变量，也可以使用服务。

您可以创建服务并在控制器中作为依赖项注入，因此您可以使用双向绑定功能访问其属性。

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。所以在你的第一个控制器中，$ 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

为什么在Angular JS中不能使用两个控制器？

4 个答案: