Question

这是我的app.js代码（主要的js）

var currentUserId;
window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile',
    'myApp.Registermdl',
    'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.createMap', 'ui.bootstrap',
'myApp.logout', 'myApp.viewCollege']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/login', { templateUrl: 'app/Login/login.html', controller: 'LoginCtrl' });
    $routeProvider.when('/home', { templateUrl: 'app/Home/home.htm', controller: 'HomeCtrl' });
    $routeProvider.when('/createuser', { templateUrl: 'app/CreateUser/createUser.html', controller: 'CreateUserCtrl' });
    $routeProvider.when('/signup', { templateUrl: 'app/Register/register.html', controller: 'RegisterCtrl' });
    $routeProvider.when('/logout', { templateUrl: 'app/Login/login.html', controller: 'LogoutCtrl' });
    $routeProvider.when('/view-map', { templateUrl: 'app/ViewMap/viewmap.html', controller: 'ViewMapCtrl' });
    $routeProvider.when('/create-map', { templateUrl: 'app/CreateMapAddress/create-mapaddress.html', controller: 'CreateMapAddressCtrl' });
    $routeProvider.when('/view-college', { templateUrl: 'app/ViewColleges/viewcolleges.html', controller: 'ViewCollegeCtrl' });
    $routeProvider.otherwise({ redirectTo: '/login' });
}]).directive("collegeAppMain", function ($location) {
    return {
        restrict: "A",
        link: function (scope) {
            scope.getClass = function (path) {
                if ($location.path() == path) {
                    return "active"
                } else {
                    return ""
                }
            }
        }
    };
});

这是我的指令代码

directive("collegeAppMain", function ($location) {
        return {
            restrict: "A",
            link: function (scope) {
                scope.getClass = function (path) {
                    if ($location.path() == path) {
                        return "active"
                    } else {
                        return ""
                    }
                }
            }
        };
    });

我在索引页面中调用了这个collegeAppMain指令

<body>
    <nav class="navbar navbar-default nav-custom" **collegeAppMain** role="navigation"></nav>
.
.
.
.
.</body>

它不起作用。但是，如果我将指令名称collegeAppMain更改为“dfhsfksksdf”

然后它正在运作。我想使用这个collegeAppMain名称

我对此感到困惑。请告诉我原因？我该如何解决这个问题？

为什么它的工作如果我给出了指令名称'dfhsfksksdf'以及为什么它不起作用如果我给出的指令名称是'collegeAppMain'？

Answer 1

使用camelCase命名指令时，应该从HTML中调用该指令：camel-case。

在你的情况下，html应如下所示：

    <nav college-app-main class="navbar navbar-default nav-custom"  role="navigation"></nav>

看看this回答。

有关指令的更多信息，您可以查看此tutorial。

要考虑的另一件事是重新构造代码。 $ routeprovider使用＆＃39;方法链接＆＃39;，所以你可以像这样写代码：

myApp.config(['$routeProvider', function ($routeProvider) {
   $routeProvider
     .when('/login', { 
         templateUrl: 'app/Login/login.html', 
         controller: 'LoginCtrl' })
      .when('/home', { 
         templateUrl: 'app/Home/home.htm', 
         controller: 'HomeCtrl' })
      .otherwise({
         templateUrl: 'some.html', 
         controller: 'Home2Ctrl'
      })
});

它的眼睛很容易。

看看EggHead的短片tutorial

angularjs指令不起作用（奇怪的问题）

1 个答案: