Javascript 角度引导,模式作用域不会在视图更改时被破坏

Javascript 角度引导,模式作用域不会在视图更改时被破坏,javascript,angularjs,twitter-bootstrap,scope,modal-dialog,Javascript,Angularjs,Twitter Bootstrap,Scope,Modal Dialog,好吧,我试着在谷歌上搜索它,并阅读了这里发布的几个问题,但似乎没有一个能解决我目前遇到的问题 我正在使用angular并使用angular引导ui。当用户单击主页上的登录按钮时,会弹出一个模式,为他们提供选项。我可以通过Facebook、Twitter等登录。但是当新的用户欢迎页面出现时,模态实例的作用域仍然存在。这不是一个大问题,但很烦人,我不想让不必要的范围蔓延减慢我的客户端 下面是我的问题的图片。用户点击主页,如下图所示。好吧,我不能发布图片,因为我的声誉不是10,所以这里有一个链接 如图

好吧,我试着在谷歌上搜索它,并阅读了这里发布的几个问题,但似乎没有一个能解决我目前遇到的问题

我正在使用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

如果你看这个范围,你会发现我用红色圈出了新添加的模态范围。当用户选择要登录的提供商时,他/她将进入新用户页面,如以下链接所示

模态范围的一部分仍然存在,即使它不再使用。我不知道如何移除它。如果我重新加载页面,范围将消失,但我不想强制重新加载以删除范围。尤其是当它目前不明显或速度减慢时。有没有办法在不重新加载的情况下删除此作用域

这是我目前的密码

控制员:

'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()">&times;</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});
            }
        }
    }
}]);