Javascript 角度引导,模式作用域不会在视图更改时被破坏
好吧,我试着在谷歌上搜索它,并阅读了这里发布的几个问题,但似乎没有一个能解决我目前遇到的问题 我正在使用angular并使用angular引导ui。当用户单击主页上的登录按钮时,会弹出一个模式,为他们提供选项。我可以通过Facebook、Twitter等登录。但是当新的用户欢迎页面出现时,模态实例的作用域仍然存在。这不是一个大问题,但很烦人,我不想让不必要的范围蔓延减慢我的客户端 下面是我的问题的图片。用户点击主页,如下图所示。好吧,我不能发布图片,因为我的声誉不是10,所以这里有一个链接 如图所示,范围仅限于视图控制器的范围。然后用户单击登录按钮,弹出模式。如以下链接所示 所以它不会让我发布超过2个链接,因为我的声誉不是10,所以我不得不伪装这一个 https删除me://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/1926680_3136387686179_2230027955019442405_n.jpg 如果你看这个范围,你会发现我用红色圈出了新添加的模态范围。当用户选择要登录的提供商时,他/她将进入新用户页面,如以下链接所示 模态范围的一部分仍然存在,即使它不再使用。我不知道如何移除它。如果我重新加载页面,范围将消失,但我不想强制重新加载以删除范围。尤其是当它目前不明显或速度减慢时。有没有办法在不重新加载的情况下删除此作用域 这是我目前的密码 控制员:Javascript 角度引导,模式作用域不会在视图更改时被破坏,javascript,angularjs,twitter-bootstrap,scope,modal-dialog,Javascript,Angularjs,Twitter Bootstrap,Scope,Modal Dialog,好吧,我试着在谷歌上搜索它,并阅读了这里发布的几个问题,但似乎没有一个能解决我目前遇到的问题 我正在使用angular并使用angular引导ui。当用户单击主页上的登录按钮时,会弹出一个模式,为他们提供选项。我可以通过Facebook、Twitter等登录。但是当新的用户欢迎页面出现时,模态实例的作用域仍然存在。这不是一个大问题,但很烦人,我不想让不必要的范围蔓延减慢我的客户端 下面是我的问题的图片。用户点击主页,如下图所示。好吧,我不能发布图片,因为我的声誉不是10,所以这里有一个链接 如图
'use strict';
angular.module('triviumApp')
.controller('HomepageCtrl', function ($log, $modal, $scope, UserFactory, $location) {
$scope.user = UserFactory;
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.items = ['item1', 'item2', 'item3'];
$scope.close = function (){
$modal.close();
};
$scope.login = function (type){
console.log("hi");
$scope.user.login(type);
};
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'LoginModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
user: function () {
return $scope.user;
}
}
});
modalInstance.result.then(function (provider) {
//They logged in
$scope.user.login(provider);
}, function (event) {
//the Modal was dismissed so the user didn't log in.
$log.info('Modal dismissed at: ' + new Date() + event);
});
};
}
);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.login = function (provider){
$modalInstance.close(provider);
};
};
以下是观点:
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
<li ng-show="user.getLoginStatus"><a href="" ng-click="open();">Login</a></li>
<!--<li ng-show="user.getLoginStatus"><a href="" ng-click="user.logout();">Logout</a></li>-->
</ul>
<h3 class="text-muted">Temp Title</h3>
</div>
<script type="text/ng-template" id="LoginModalContent.html">
<div class="modal-body">
<button type="button" class="close pull-right" aria-hidden="true" ng-click="cancel()">×</button>
<fieldset>
<legend class="bold">Login/Sign-up</legend>
<div class="login-icons center-block">
<a href="" ng-click="login('facebook');"><span class="facebook icon"></span></a>
<span><a href="" ng-click="login('github');"><span class="github icon"></span></a></span>
<!--<span><a href="" ng-click="login('google');"><span class="google icon"></span></a></span>-->
<span><a href="" ng-click="login('persona');"><span class="persona icon"></span></a></span>
<span><a href="" ng-click="login('twitter');"><span class="twitter icon"></span></a></span>
</div>
</fieldset>
</div>
</script>
谢谢你的帮助-
'use strict';
var User = angular.module('UserApp', ['firebase']);
User.factory('UserFactory', ['$firebase', '$window', function ($firebase, $window){
//Firebase Variables
var user = {
'name': null,
'id': null,
'address': null,
'email': null,
'gender': null,
'loggedIn': false
};
var firebase = new Firebase("YOUR FIREBASE KEY HERE");
var auth = new FirebaseSimpleLogin(firebase, function(error, response) {
if (error) {
// an error occurred while attempting login
} else if (user) {
// user authenticated with Firebase
console.log('Auth', response);
if(response !== null) {
getUser(response);
}
} else {
// user is logged out
}
});
function getUser(firebaseInfo){
if(firebaseInfo !== null && firebaseInfo.firebaseAuthToken !== null){
user.id = firebaseInfo.firebaseAuthToken.split('.')[0];
firebase.child(user.id).once('value', function(snap){
if(snap.val() === null){
populateUser(firebaseInfo, snap, true);
}
else{
//Check to see if user used a different provider
populateUser(firebaseInfo, snap, false);
}
});
}
}
function populateUser (firebaseInfo, snap, newUser){
var provider = firebaseInfo.provider;
//Create the user in the firebase table
firebase.child(user.id);
if(provider === 'facebook'){
if(newUser){
console.log('Here');
facebookUser(firebaseInfo);
$window.location.href ='/#/new-user';
} else{
if(!snap.val().Facebook_ID){
facebookUser(firebaseInfo);
}
}
} else if(provider === 'github'){
if(newUser){
githubUser(firebaseInfo);
$window.location.href('/new-user');
} else{
if(!snap.val().GitHub_ID){
githubUser(firebaseInfo);
}
}
} else if(provider === 'persona'){
if(newUser){
personaUser(firebaseInfo);
$window.location.href('/new-user');
} else{
if(!snap.val().Persona_ID){
personaUser(firebaseInfo);
}
}
}else if(provider === 'twitter'){
if(newUser){
twitterUser(firebaseInfo);
$window.location.href('/new-user');
} else{
if(!snap.val().Twitter_ID){
twitterUser(firebaseInfo);
}
}
}
}
function facebookUser (firebaseInfo){
firebase.child(user.id).update({'Facebook_ID': firebaseInfo.id});
firebase.child(user.id).update({'Facebook_Link': firebaseInfo.thirdPartyUserData.link});
user.name = firebaseInfo.name.split(' ');
user.gender = firebaseInfo.thirdPartyUserData.gender;
if(user.name[0] && user.name[1]) {
firebase.child(user.id).update({'Name-First': user.name[0], 'Name-Last': user.name[1]});
}
if(user.gender){
firebase.child(user.id).update({'Gender': firebaseInfo.thirdPartyUserData.gender});
}
}
function githubUser (firebaseInfo){
firebase.child(user.id).update({'GitHub_ID': firebaseInfo.id});
firebase.child(user.id).update({'GitHub_Link': firebaseInfo.thirdPartyUserData.html_url});
firebase.child(user.id).update({'Email': firebaseInfo.thirdPartyUserData.emails[0].email});
}
function personaUser (firebaseInfo){
firebase.child(user.id).update({'Persona_ID': firebaseInfo.id});
}
function twitterUser (firebaseInfo){
firebase.child(user.id).update({'Twitter_ID': firebaseInfo.id});
user.name = firebaseInfo.name.split(' ');
if(user.name[0] && user.name[1]) {
firebase.child(user.id).update({'Name-First': user.name[0], 'Name-Last': user.name[1]});
}
}
return {
login: function (provider){
if(provider !== undefined && provider !== '' && provider !== null){
auth.login(provider);
}
},
logout: function (){
auth.logout();
},
getLoginStatus: user,
getMyAddress: function (){
return user.address;
},
getMyEmail: function (){
return user.email;
},
getMyName: function (){
return user.name;
},
updateMyName: function (first, last){
if(user.id != null){
firebase.child(user.id).update({'First_Name': first});
firebase.child(user.id).update({'Last_Name': last});
}
},
updateMyEmail: function (email){
if(user.id != null){
firebase.child(user.id).update({'Email': email});
}
},
updateMyAddress: function (address){
if(user.id != null){
firebase.child(user.id).update({'Address': address});
}
}
}
}]);