模型更改没有反映在 angularjs 的视图中答案

【问题标题】：Model change not getting reflected in view in angularjs模型更改没有反映在 angularjs 的视图中
【发布时间】：2015-09-27 12:20:53
【问题描述】：

我有一个主索引页面，我最初在其中隐藏了页脚栏。但是我想在某些子视图中单击某些项目时显示它。我可以在日志中看到模型正在更改，但它没有反映在视图中。

索引页面：

<body ng-app="starter">

<ion-pane ng-controller="AudioCtrl">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <ion-content></ion-content>
    <ion-footer-bar ng-hide="musicBar.hide">
        <div class="audio-block">
            .....
        </div>
    </ion-footer-bar>
</ion-pane>
</body>

子视图页面：

<ion-view ng-controller="AudioCtrl as controller" title="{{selectedCategory}}">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="item in items" ng-click="$parent.songClicked()">{{item.desc}}</ion-item>
        </ion-list>
    </ion-content>
</ion-view>

角码：

app.controller('AudioCtrl', function ($sce, $scope) {
        $scope.musicBar= {
            hide: true
        };
        $scope.songClicked = function(){
            console.log($scope.musicBar.hide);
            $scope.musicBar.hide = false;
            console.log($scope.musicBar.hide);
        };
    }

);

当我单击该项目时，我可以看到 musicBar.hide 从 true 变为 false，但它没有反映在视图中。我也检查了其他类似的问题，但解决方案不起作用。我曾尝试使用 $scope.$digest() 和 $scope.$apply()，但随后我的应用程序已经在进行中。

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

index.html 和 cub 视图都由它们自己的 AudioCtrl 实例管理，每个实例都有自己的范围。

当主视图范围的musicBar.hide 变为真时，标题可见，但这永远不会发生，因为子视图不会修改它。它修改了子视图范围的musicBar.hide 变量。

我看不出子视图与主视图具有相同控制器的任何原因。它不应该。

【讨论】：

谢谢，使用 $emit 和 $on 可以为他们使用两个不同的控制器。