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