Question

我是这个领域的新手，想写一个应用程序，现在我遇到了一些问题。这是我的代码的简单版本，我想要的是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;
    };
}

Answer 1

您的代码存在一些问题。

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

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

以下是工作解决方案：

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

Answer 2

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

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

我的范围变量的奇怪行为

2 个答案: