如何从AngularJS视图更新变量？

Question

我想要什么

我有3个观看次数。所有视图都有自己的控制器。第一种观点是回家。在主视图中，用户通过单击div元素进入视图2。在视图2上，用户通过单击按钮打开视图3。在视图3上，用户单击按钮并返回到视图2.

我面临的问题是我想知道用户是否来自视图2.在这种情况下，我希望在用户来自主视图时显示不同的内容。

创建另一个视图

可以在不创建其他视图的情况下完成吗？

我的尝试

我创建了一个服务来跟踪我是否来自视图3，但是在视图2从主视图打开后，视图2的控制器不再执行。所以基本上$scope.fromViewThree没有更新，但仍然是假的。

我在$route.reload()之前添加了$window.location = "#/app/viewtwo";，因为我认为它会重新初始化控制器（source），然后$scope.fromViewThree应该已更新。我也尝试在$window.location = "#/app/viewtwo";下面添加它。

控制器视图2

.controller('ViewTwoCtrl', function($scope, $window, fromViewThree) {
    $scope.fromViewThree = fromViewThree.getBoolean();
    fromViewThree.setBoolean(false);
    $scope.goToViewThree = function() {
        $window.location = "#/app/viewthree";
    };
})

控制器视图3

.controller('ViewThreeCtrl', function($scope, $window, fromViewThree) {
    $scope.goToViewTwo = function() {
        fromViewThree.setBoolean(true);
        $window.location = "#/app/viewtwo";
    };
})

Directives.js

.service('fromViewThree', function () {
        var b = false;

        return {
            getBoolean: function() {
                return b;
            },
            setBoolean: function(value) {
                b = value;
            }
        };
})

HTML视图2

<div ng-if="fromViewThree == false">
    <p>You came from view home!</p>
</div>
<div ng-if="fromViewThree == true">
    <p>You came from view three!</p>
</div>
<div>
    <button ng-click="goToViewThree()" ng-if="fromViewThree == false">Go to view 3</button>
    <button ng-click="goToViewThree()" ng-if="fromViewThree == true">Go again to view 3</button>
</div>

HTML视图3

<div class="row">
    <button class='button' ng-click="goToViewTwo()">Lets go to view two!</button>
</div>

Answer 1

尝试使用UI router实现视图和控制器。设置状态后，访问先前的状态将很容易Angular - ui-router get previous state

Answer 2

解决方案

Manu Antony将我朝着正确的方向推向$rootScope（more info）。我在app.js中添加了代码，它将以前的状态/视图名称存储到$rootScope.fromViewThree中。我现在可以在视图2的HTML中访问先前的状态/视图名称，并且在切换状态/视图成功时将更新先前的状态/视图名称。

  

警告：

     

如果您有变量，则所有范围都从$rootScope继承   $rootScope.data并且有人忘记已定义data   并在本地范围内创建$scope.data，您将遇到问题。

控制器视图2

.controller('ViewTwoCtrl', function($scope, $window) {        
    $scope.goToViewThree = function() {
        $window.location = "#/app/viewthree";
    };
})

控制器视图3

.controller('ViewThreeCtrl', function($scope, $window) {
    $scope.goToViewTwo = function() {            
        $window.location = "#/app/viewtwo";
    };
})

Directives.js

我不再需要该服务，因为我现在使用$rootScope来监控哪个视图是我之前的视图。

HTML视图2

<div class="row" ng-if="fromViewThree != 'app.viewthree'">
    <p>You came from view home!</p>
</div>
<div class='row' ng-if="fromViewThree == 'app.viewthree'">
    <p>You came from view three!</p>
</div>
<div class="row">
    <button id="activateCameraBtn" class='button' ng-click="goToViewThree()" ng-if="fromViewThree != 'app.viewthree'">Go to view 3</button>
    <button id="activateCameraBtn" class='button' ng-click="goToViewThree()" ng-if="fromViewThree == 'app.viewthree'">Go again to view 3</button>
</div>

HTML视图3

视图3的HTML未更改。

App.js

angular.module('myApp', [])

.run(function($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
        $rootScope.fromViewThree = from.name; //e.g. app.home
    });    
})

....