角度引导，当视图改变时，模态范围不会被破坏

时间：2014-04-10 23:22:11

标签： javascript angularjs twitter-bootstrap scope modal-dialog

好的，所以我已经尝试了谷歌搜索，并阅读了这里发布的各种问题，但似乎没有解决我目前的问题。

我正在使用角度和使用angular-bootstrap ui。当用户点击主页上的登录按钮时，会弹出一个模式，为他们提供选项。我可以通过Facebook，Twitter等登录就好了。但是当新用户欢迎页面时，模态实例的范围仍然存在。这不是一个很大的问题，但很烦人，而且我不会有不必要的范围蔓延，这会减慢我的客户端。

这里使用图片了解我的问题。因此用户点击主页如下所示。（好吧，我无法发布图片，因为我的声誉不是10，所以这里是他们的链接。）

https://scontent-b.xx.fbcdn.net/hphotos-prn2/t1.0-9/1538681_313638755452846_5694320198249084494_n.jpg

如照片所示，范围仅限于视图控制器的范围。然后用户单击“登录”按钮，弹出模式。 （可以在以下链接中看到）

所以它不会让我发布2个以上的链接，因为我的名声不是10，所以我不得不伪装这个。

https（删除我）：// fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/1926680_313638758786179_2230027955019442405_n.jpg

如果你看一下范围，你会看到我用红色圈出了新增的模态范围。当用户选择要登录的提供者时，他/她被带到新用户页面，如以下链接中所示。

https://scontent-b.xx.fbcdn.net/hphotos-prn2/t1.0-9/10155397_313638762119512_900295349985269066_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>

此处是用户工厂 - （注意我删除了我的火力钥匙密钥，因此无法访问我的火力帐户帐户，因此如果您对其进行测试，则需要添加密钥和设置您的Firebase帐户可与Facebook或Twitter合作。

'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});
            }
        }
    }
}]);

感谢您的帮助。 ： - ）

0 个答案:

没有答案
相关问题
最新问题