Question

我正在制作聊天应用程序。在第二页（家）我有用户列表。当我点击用户我想打开弹出窗口。我正在使用此代码进行弹出。

http://jsfiddle.net/dave_wilton/a3gyq/5/light/

但是当我点击某个用户而不是显示弹出窗口时，我会在第一页登录时重定向。

这是我的代码：

主-controller.js

 (function () {

    'use strict';
    function HomeController($scope,redirectService) {

        $scope.homeController = {};

        $scope.homeController.users = [
            {
                icon: 'img/online.png',
                name: 'Vanessa Angel'
            },
            {
                icon: 'img/online.png',
                name: 'Tom Baker'
            }
        ];

        $scope.homeController.logOut = function () {
            redirectService.loginToLogin();
        };
    }


    angular.module('chatApp').controller('homeController', HomeController);
})();

home.tpl.html

<div id="wrapper">

    <div class="right">
        <input type="submit" id="logOut" class="btn btn-primary" value="Sign Out" ng-click="homeController.logOut()">
    </div>
    <div class="left clear">
        <h1 style="font-family: 'Helvetica Neue'"><b>Online users</b></h1>

        <div ng-repeat="user in homeController.users">
            <user-directive user-list="user"></user-directive>

        </div>

    </div>
</div>

用户-directiv.js

(function () {
    'use strict';

    angular.module('chatApp').directive('userDirective', function () {
        return {
            restrict: 'E',
            scope: {
                userList: '='
            },
            templateUrl: 'src/home/user.tpl.html'
        };
    });
})();

指令tmpl

<div>
    <ul class="list-group">
        <li class="list-group-item">
            <p class="item">
                <a href="#myModal" data-backdrop="false" data-toggle="modal">
                    <img width="20px" height="20px" ng-src="{{userList.icon}}"/><span class="icon-text">{{userList.name}}</span>
                </a>
            </p>
        </li>
    </ul>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Settings</h4>

                </div>
                <div class="modal-body">
                    <p>Settings</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

重定向服务

/ ** *由用户于2015年9月15日创建。 * /

(function () {
    'use strict';
    angular.module('chatApp').factory('redirectService', function ($state) {
        var service = {};
        service.loginToHome = function () {
            $state.go('home');
        };

        service.loginToLogin = function(){
            $state.go('login');
        };
        return service;
    });
})();

EDIT为配置状态添加了app.js

(function () {

    'use strict';
    angular.module('chatApp', ['ui.router', 'ui.bootstrap'])
        .config(function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.otherwise("/login");

            $stateProvider
                .state('login', {
                    url: '/login',
                    templateUrl: 'src/user/login/login.tpl.html',
                    controller: 'loginController'
                })
                .state('home', {
                    url: '/home',
                    templateUrl: 'src/home/home.tpl.html',
                    controller: 'homeController'

                })
        });
})();

Answer 1

所以你正在使用一些url路由服务（很可能是angular-ui路由器），并且你有一个href='#myModal'的锚标签使用twitter引导程序（假设你是/那个小提琴），结合数据切换，调出你的模态。

但是，因为您正在使用angular-ui路由器，路由器可能会尝试将href='#myModal'作为状态（即/ myModal或/home.myModal）读取，除非它不是有效状态所以它会重定向到/ login或您将$urlRouteProvider.otherwise设置为。

的任何内容

您可以使用data-target='#myModal'而不是href代码

来解决此问题

draggable bootstrap弹出窗口不起作用

1 个答案: