Question

我是Angular的新手，当一切都在一个文件中时，它最初工作。现在我正试图使用部分，我遇到了问题。这是我的索引页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="JBenchApp">
<head>
    <title>Judicial Workbench</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <link href="css/bootstrap-datepicker.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();

            if (dd < 10) {
                dd = '0' + dd
            }

            if (mm < 10) {
                mm = '0' + mm
            }

            today = mm + '/' + dd + '/' + yyyy;
            $('#datepicker').datepicker({ autoclose: true, startDate: today });
            $('#theDate').val(today);
            var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
            $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
            $('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
            $('#accordion').on('show.bs.collapse', function (e) {
                $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
                $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
            });
            $('#accordion').on('hide.bs.collapse', function (e) {
                $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
            });

            $('#firstWarrant').click(function () {
                $('#showLogo').hide();
                $('#typeOfCase').html('Warrant - Moritz, Jay');
                $('#warrant1').show();
                $('#warrant2').hide();
            });

            $('#secondWarrant').click(function () {
                $('#showLogo').hide();
                $('#typeOfCase').html('Warrant - Newman, Erika');
                $('#warrant2').show();
                $('#warrant1').hide();
            });

            $('.navbar-nav li').click(function (e) {
                $('.navbar-nav li.active').removeClass('active');
                var $this = $(this);
                if (!$this.hasClass('active')) {
                    $this.addClass('active');
                }
                e.preventDefault();
            });

        });
    </script>
    <base href="/" />
</head>
<body ng-controller="JBenchCtrl">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid black-back">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Judicial Workbench</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Calendar</a></li>
                <li><a href="#">Min/Mandatory Chart</a></li>
                <li><a href="#">Trial Guide</a></li>
                <li><a href="#">Calendar Check-in</a></li>
            </ul>
            <div class="pull-right" ng-show="!loggedin">
                <input type="text" name="userName" placeholder="Username" class="login-area" />
                <input type="password" name="userPassword" placeholder="Password" class="login-area" />
                <button class="btn btn-primary" type="submit" ng-click="isLoggedIn();">
                    Login
                </button>
            </div>
            <div class="pull-right white" ng-show="loggedin">
                <span>Welcome, Judge Mahony!</span>
                <ul class="nav navbar-nav navbar-right white">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search search"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <form class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Search">
                                    </div>
                                    <button type="submit" class="btn btn-default btn-block submitBtn">Submit</button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="#"><span class="glyphicon glyphicon-cog white settings"></span></a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div ng-view>
            <!-- Location for partial views to be displayed-->
        </div>

    </div>
</body>
</html>

这是我的app.js：

'use strict';

var JBenchApp = angular.module('JBenchApp', [
    'ngRoute',
    'JBenchControllers'
]);

JBenchApp.config(['$routeProvider', '$locationProvider', 
  function($routeProvider, $locationProvider) {
      $routeProvider.
        when('/dashboard', {
            templateUrl: 'partials/dashboard.html',
            controller: 'JBenchCtrl'
        }).
        when('/calendar', {
            templateUrl: 'partials/calendar.html',
            controller: 'JBenchCtrl'
        }).
        when('/', {
            templateUrl: 'partials/calendar.html',
            controller: 'JBenchCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });

      $locationProvider.html5Mode(true);
  }]);

这是controllers.js：

'use strict';

/** Controllers **/

var JBenchControllers = angular.module('JBenchControllers', []);

JBenchControllers.controller('JBenchCtrl', function ($scope) {
    $scope.loggedin = false;

    $scope.isLoggedIn = function () {
        $scope.loggedin = true;
    };
});

这是我的calendar.html部分：

<div class="row" ng-show="loggedin">
    <div class="col-sm-4">
        Calendar here
    </div>
    <div class="col-sm-8">
        Case list here
    </div>

</div>

当我点击具有ng-click =＆＃34; isLoggedIn＆＃34;的按钮时＆＃34;日历在这里＆＃34;和＆＃34;案例列表在这里＆＃34;行没有显示。但是，我的index.html文件的一部分是＆＃34; Welcome，Judge Mahony！＆＃34;确实显示，它也依赖于相同的变量。我做错了什么？

谢谢！

编辑：这是使用ng-inspector显示两个范围的图像。我已将每个范围与代码中的位置相关联。怎么避免这个？

Answer 1

根据AngularJS ngView documentation：

该指令创建新范围。

因此，指令calendar.html中的模板ng-view正在访问ngView的范围，而无法访问外部控制器的范围。

使用绑定对象将起作用。例如，在您的控制器中：

$scope.userStatus = {
    loggedin: false
};

然后使用ng-show="userStatus.loggedin"或ng-hide="userStatus.loggedin"。

参考：Understanding scopes。

Answer 2

经过对此问题的大量研究后，答案是将ng-show =“$ parent.loggedin”添加到通过路由显示的部分中。然后，它访问父范围的登录变量，一切都与世界相符。

ng-click not firing function

2 个答案: