如何从AngularJS视图更新变量？

debugcn 发表于 Dev

约尔·波特（Sjoerd Pottuit）

我想要的是

我有3个意见。所有视图都有自己的控制器。第一个视图是家。用户通过单击div元素从主视图转到视图2。在视图2上，用户通过单击按钮来打开视图3。在视图3上，用户单击按钮，然后返回视图2。

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

创建另一个视图

可以在不创建另一个视图的情况下完成吗？

我的尝试

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

我$route.reload()之前添加过，$window.location = "#/app/viewtwo";因为我认为它将重新初始化controllers（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>

约尔·波特（Sjoerd Pottuit）

解决方案

Manu Antony将我朝着正确的方向推向$ rootScope（更多信息）。我在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
    });    
})

....

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-16

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章