gpt4 book ai didi

javascript - angularjs 指令不起作用(奇怪的问题)

转载 作者:行者123 更新时间:2023-11-28 08:09:44 25 4
gpt4 key购买 nike

这是我的 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 名称

我对此感到困惑。请告诉我这是为什么?我该如何解决这个问题?

Why its working if i gave the directive name is 'dfhsfksksdf' and why it's not working if i gave the directive name is 'collegeAppMain '?

最佳答案

当使用驼峰式命名指令时,应该从 HTML 中调用该指令,如下所示:camel-case。

在您的情况下,html 应该如下所示:

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

看看this回答。

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

另一件需要考虑的事情是重新格式化代码。$routeprovider 使用“方法链接”,因此您可以像这样编写代码:

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

眼睛更舒服。

看看这个短视频tutorial通过蛋头

关于javascript - angularjs 指令不起作用(奇怪的问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24402383/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com