我在AngularJS中的绑定确实有问题。我创建了两个组件(leftForm和rightForm(，这些组件有一个输入和一个p元素。此p元素是一个计数，当您单击其他组件的输入按钮时，该计数会增加。
例如，我点击leftButton(左组件(，然后右按钮(右组件(中的计数需要增加，我已经完成了这一点，但问题是我在视图中看不到这些变量，所以我猜我的绑定有问题。这是我的代码：
angular.module('testApp', [])
.controller('Controller', function ($rootScope) {
var vm = this;
$rootScope.valueLeft = 0;
$rootScope.valueRight = 0;
vm.rightButton = function () {
$rootScope.valueLeft += 1;
}
vm.leftButton = function () {
$rootScope.valueRight += 1;
}
})
.component('leftForm', {
templateUrl: 'leftForm.html',
controller: 'Controller',
controllerAs: 'vm',
bindings: {
onUpdate: '&'
}
})
.component('rightForm', {
templateUrl: 'rightForm.html',
controller: 'Controller',
controllerAs: 'vm',
bindings: {
onUpdate: '&'
}
});<!doctype html>
<html ng-app="testApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body>
<div ng-controller="Controller as vm">
<div class="container" style="text-align: center; padding-top: 2%;">
<div class="row" style="padding: 2%; border: 1px solid;">
<div class="col">
<left-form></left-form>
</div>
<div class="col"></div>
<div class="col">
<right-form></right-form>
</div>
</div>
</div>
</div>
</body>
<script type="text/ng-template" id="leftForm.html">
<p>{{$rootScope.valueLeft}}</p>
<button ng-click="vm.leftButton()">+1</button>
</script>
<script type="text/ng-template" id="rightForm.html">
<p>{{$rootScope.valueRight}}</p>
<button ng-click="vm.rightButton()">+1</button>
</script>
</html>要访问模板中的$rootScope变量，只需将$root用作$rootScope的引用，即{{$root.valueLeft}}和{{$root.valueRight}}。下面是一个工作示例：
angular.module('testApp', [])
.controller('Controller', function ($rootScope) {
var vm = this;
$rootScope.valueLeft = 0;
$rootScope.valueRight = 0;
vm.rightButton = function () {
$rootScope.valueLeft += 1;
}
vm.leftButton = function () {
$rootScope.valueRight += 1;
}
})
.component('leftForm', {
templateUrl: 'leftForm.html',
controller: 'Controller',
controllerAs: 'vm',
bindings: {
onUpdate: '&'
}
})
.component('rightForm', {
templateUrl: 'rightForm.html',
controller: 'Controller',
controllerAs: 'vm',
bindings: {
onUpdate: '&'
}
});<html ng-app="testApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body>
<div ng-controller="Controller as vm">
<div class="container" style="text-align: center; padding-top: 2%;">
<div class="row" style="padding: 2%; border: 1px solid;">
<div class="col">
<left-form></left-form>
</div>
<div class="col"></div>
<div class="col">
<right-form></right-form>
</div>
</div>
</div>
</div>
</body>
<script type="text/ng-template" id="leftForm.html">
<p>{{$root.valueLeft}}</p>
<button ng-click="vm.leftButton()">+1</button>
</script>
<script type="text/ng-template" id="rightForm.html">
<p>{{$root.valueRight}}</p>
<button ng-click="vm.rightButton()">+1</button>
</script>
</html>