与$scope和控制器相关的问题

Question

我试着用两个控制器互相交谈，但我被两个问题/问题困住了：

1. 在我的视图中，最初没有显示$scope.display。我想知道为什么。
2. $scope.display似乎在两个控制器之间共享，而我读到的$scope(s)是孤立的。我想知道为什么。
3. 我在堆栈溢出上读到，控制器之间最好的通信方式是使用$rootScope.broadcast和$rootScope.on。这适用于这个例子吗？

JS

angular.module("superApp", [])
    .controller("headerCtrl", function ($scope) {
        $scope.display = 'hello';
    })
    .controller("homeCtrl", function ($scope) {

    });

<div ng-app="superApp">
    <div ng-ctrl="headerCtrl">
        <p>{{ display }}</p>
        <div class="bar hello" ng-show="display == 'hello'"> 
            <span>Hello World<span>
            <button ng-click="display = 'bye'">Say bye</button>
        </div>
        <div class="bar bye" ng-show="display == 'bye'">
            <span>Bye Bye</span>
            <button ng-click="display = 'hello'">Say hello</button>
        </div>
    </div>
    <div ng-ctrl="homeCtrl" class="content">
        <button ng-click="display = 'bye'">Say bye</button>
        <button ng-click="display = 'hello'">Say hello</button>
    </div>
</div>

我想我错过了什么..。下面是一个需要测试的小提琴。

Answer 1

您希望使用ng-controller而不是ng-ctrl。

<div ng-controller="headerCtrl">

和

<div ng-controller="homeCtrl" class="content">

为什么你的代码“起作用”？

当使用这些指令时，没有声明控制器及其相关的作用域：

ng-click="display = 'bye'"
ng-show="display == 'hello'"

您基本上会影响$rootScope变量，并在$rootScope中设置一个新的变量'display‘，并为每次单击设置一个值。这就是为什么它只在第一次单击之后显示，并且在最初查看页面时不出现。你的控制器都没有被使用过。

请参阅：用于AngularJS的$rootScope文档

Answer 2

问题是ng-ctrl指令，应该是ng-控制器。

    <div ng-controller="homeCtrl" class="content">