AngularJS - 单击时未到达控制器方法答案

【问题标题】：AngularJS - On click not reaching controller methodAngularJS - 单击时未到达控制器方法
【发布时间】：2015-11-06 07:09:34
【问题描述】：

我正在通过开发一个项目来学习 Angularjs 和 Nodejs。我遵循了这个tutorial 并组织了我的文件夹结构和路由配置。

问题： 我添加了一个名为 isActive 的方法来根据选项卡单击更新 ng-class。但是当我单击选项卡时，它不会调用 isActive 方法。

我的猜测是，我在 appRoutes.js 中做错了，但不知道如何解决这个问题。我可以访问 MainController 但不能访问其中的方法。

我还有一个问题，当我进入应用程序或单击主页选项卡或单击应用程序标题时，我需要激活主页选项卡。

下面是html和js代码。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>ets</title>
        <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/ets.css">
    </head>

    <body ng-app="etsApp">
        <div id="mainDiv">
            <div>
                <section id="header_section" class="main-title"></section>
                <section id="nav_section"></section>
            </div>
            <section id="body_section">
                <div ng-view="ng-view"></div>
            </section>
            <section id="footer_section" class="footer-style"></section>
        </div>

        <script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>       
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#header_section').load('views/partials/header.html');
                $('#nav_section').load('views/partials/navigation_main.html');
                $('#footer_section').load('views/partials/footer.html');    
            });
        </script>
    </body>
</html>

navigation_main.html

<div>
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">

      <li ng-class="{active : isActive('/home')}" id="nav_home">
        <a href="/home">Home</a>
      </li>

      <li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
        <a href="/expensereporting">Expense Reporting</a>
      </li>

      <li ng-class="{active : isActive('/remainders')}">
        <a href="/remainders" id="nav_remain">Todo Remainder's</a>
      </li>

      <li ng-class="{active : isActive('/pdfoperations')}">
        <a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>
      </li>

      <li ng-class="{active : isActive('/imageoperations')}">
        <a href="/imageoperations" id="nav_img">Image Operation's</a>
      </li>

    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>
    </ul>
  </nav>
</div>

header.html

<div>
  <header id="header" style="margin-left: 50px;">
      <a href="/" style="text-decoration: none; color: black;">
        <strong>eTools Store</strong>
      </a> 
  </header>
</div>

appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        });

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

app.js

    angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.isActive = function(destination) {
            console.log($location.path());
            return destination === $location.path();
        }

    });

【问题讨论】：

可能只是语法错误？ - 你需要在类名周围加上引号。 <li ng-class="{'active' : isActive('/pdfoperations')}">
@Tristan 我不这么认为.. 请看这个答案stackoverflow.com/a/18562339/967638
你能搞定这个吗？
这对我来说不合适。除了将同一控制器用于多条路线的不良做法外，您还尝试评估无法访问控制器的元素中的角度表达式。角度路由提供程序将控制器附加到 ng-view 元素和仅在其中加载的模板，它不会使控制器“全局”可用。
另外，使用 JQuery .load() 注入您的部分的做法不是角度方式。

标签： javascript angularjs node.js express angular-controller

【解决方案1】：

您的 navigation_main.html 超出了控制器范围。这是主要原因。尝试像这样为您的导航创建单独的控制器

.controller('NavCtrl', function($scope) {
    isActive = function(destination) { /*...*/ }
}

将其放入文件 js/nav.js 并添加到您的 html

<script type="text/javascript" src="js/nav.js"></script>

然后将此控制器添加到您的 navigation_main.html 代码中

<div ng-controller="NavCtrl">

【讨论】：

即使我也有同样的疑问。好一个。但是我有一个问题，如何让导航栏进入 MainController 范围？
不知道你为什么需要它。好的，在这种情况下，只需将 MainController 添加到 navigation_main.html <div ng-controller="MainController">
我们还需要在 div 中提及控制器吗？因为根据教程链接，在 appRoutes.js 中我们编写了 templateUrl 和控制器。这里的控制器意味着当我们访问一个链接说'/'（ROOT）时，我们将使用那里提到的控制器。我对吗？我尝试将此添加到导航 div，但它不起作用。无论如何，让我写 JSFiddle 这样一些人就很容易理解问题
您在路由参数中指定控制器和模板Url，即您将控制器绑定到此模板。您无需在模板视图中提及控制器。并且在路由时，模板视图被加载到<div ng-view></div>。您只能在此视图中使用控制器变量和方法，不能在其他视图中使用！比如/路由，home.html被加载到<div ng-view></div>，你只能在这个视图home.html中使用MainController函数，你不能在超出范围的html代码的其他地方使用MainController函数。
这很好。我认为被提及的控制器会处理该链接中存在的整个页面。哦，谢谢你的观点。

【解决方案2】：

关于没有到达isActive方法的问题：
尝试重新组织：

    <script type="text/javascript" src="js/controllers/MainCtrl.js">         </script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

进入：

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

【讨论】：

不。仍然没有达到.. :(

【解决方案3】：

可能是你忘了加。否则

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        })
        .otherwise({
                redirectTo: '/'
            });

更新：试试这个 - 在 navigation_main.html

中

 <li ng-class="{'active' : path}" >
    <a href="/imageoperations" id="nav_img" ng-click="itemClicked('/imageoperations')">Image Operation's</a>
  </li>

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.itemClicked= function(destination) {
                      $scope.path = destination;
        }

    });

【讨论】：

我不这么认为。否则就像 if-else 条件的 else 部分一样，如果没有其他条件满足，则转到最后一个条件。无论如何，我已经尝试过，但仍然没有达到。

【解决方案4】：

您可以尝试使用 Angular ui-router 进行路由，并在状态处于活动状态时添加活动类。您只需要添加 ui-sref-active="YourActiveClassHere"。 Angular UI-Router

尝试改变这个顺序，

    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

对此，

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

【讨论】：

【解决方案5】：

尝试在你的 a 标签中添加 ng-click=isActive('/home')。

<li ng-class="{active : activeClass == 'home'}" id="nav_home">
    <a href="/home" ng-click=isActive('/home')>Home</a>
</li>

在你的 MainCtrl 中添加这一行，

$scope.activeClass = '';
$scope.isActive = function(destination) {
    $scope.activeClass = destination;
}

【讨论】：