我的范围变量的奇怪行为

时间:2016-11-04 02:46:07

标签: javascript angularjs

我是这个领域的新手,想写一个应用程序,现在我遇到了一些问题。这是我的代码的简单版本,我想要的是API首先显示signUp。在我按signUp并按submit后,显示的按钮应仅为signout

现在,我的范围变量不起作用,此处显示两个按钮。你可以修改它并告诉我原因吗?如果可能的话,请使用rootscope和范围以及sc.logIn(),以便我可以知道如何以这种方式编写。谢谢!

https://plnkr.co/edit/ewhLZsKKTWTzlECsj4xO?p=preview

angular.module('myApp',['myApp.dashboard','myApp.signUp']);

angular.module('myApp.dashboard').controller('mainControl',mainControl);
mainControl.$inject = ['$rootScope','$scope'];
function mainControl($rootScope,$scope){
  $rootScope.logged=false;
    $scope.logged=$rootScope.logged;
}


angular.module('myApp.signUp').controller('signUpControl',signUpControl);
signUpControl.$inject = ['$rootScope','$scope'];
function signUpControl($rootScope){
    alert("haha");
    this.logIn=function(){
        $rootScope.logged=true;
    };
}

2 个答案:

答案 0 :(得分:2)

您的代码存在一些问题。

每当你声明一个没有第二个参数的模块时,它只是尝试获取已经声明/定义的模块。为了创建新模块,如果没有依赖项,则需要传入依赖项或空数组。

此外,您需要观察对范围所做的更改,以确保将更改通知控制器,以使其在视图中可见。

以下是工作解决方案:

angular.module('myApp', ['myApp.dashboard', 'myApp.signUp']);

angular.module('myApp.dashboard', []).controller('mainControl', mainControl);

function mainControl($rootScope, $scope) {
  $rootScope.logged = false;
  $rootScope.$watch(() => $rootScope.logged, function() {
    $scope.logged = $rootScope.logged;
  });
}

mainControl.$inject = ['$rootScope', '$scope'];

angular.module('myApp.signUp', []).controller('signUpControl', signUpControl);
signUpControl.$inject = ['$rootScope', '$scope'];

function signUpControl($rootScope) {
  this.logIn = function() {
    var a = 1;
    $rootScope.logged = true;
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainControl as mc">
    <div>{{mc.logged}}
      <div ng-hide="logged">

        <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
      </div>
      <div ng-show="logged">
        <button>Sign Out</button>
      </div>
    </div>


    <div class="signUp modal fade" id="signUp" ng-controller='signUpControl as sc'>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">sigh up</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          </div>
          <div class="modal-body">
            <form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()">
              <label for="email">
                <span>email:</span>
                <input type="email" name="email">
              </label>
              <button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button>
            </form>
          </div>
          <div class="modal-footer">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

由于某种原因,代码段不允许我提交表单。

您可以在此处找到有效的解决方案:Codepen

答案 1 :(得分:0)

根本不奇怪。
打开控制台,显示错误 你的主要问题是角度引导错误。

angular.module('myApp.dashboard', [])
-------------------------------   ^^  ------- must be an array even empty