Javascript AngularJS引导手风琴导致AngularJS加载多次
我已经有这个问题好几天了,我无法找到它的根源。 我正在使用Gulp来构建我的项目。在Javascript AngularJS引导手风琴导致AngularJS加载多次,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我已经有这个问题好几天了,我无法找到它的根源。 我正在使用Gulp来构建我的项目。在gulpfile.js中,我有以下内容: 对于我的JS gulp.task('scripts', function () { gulp.src([ DIRSOURCE + 'lib/angular/angular.min.js', DIRSOURCE + 'lib/jquery/jquery.min.js', DIRSOURCE + 'lib/angular
gulpfile.js
中,我有以下内容:
对于我的JS
gulp.task('scripts', function () {
gulp.src([
DIRSOURCE + 'lib/angular/angular.min.js',
DIRSOURCE + 'lib/jquery/jquery.min.js',
DIRSOURCE + 'lib/angular-ui-router/release/angular-ui-router.min.js',
DIRSOURCE + 'lib/angular-animate/angular-animate.min.js',
DIRSOURCE + 'lib/angular-bootstrap/ui-bootstrap.min.js',
DIRSOURCE + 'lib/angular-sanitize/angular-sanitize.min.js',
DIRSOURCE + 'lib/angular-translate/angular-translate.min.js',
DIRSOURCE + 'lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js',
DIRSOURCE + 'lib/angular-ui-select/dist/select.min.js',
DIRSOURCE + 'lib/angular-tour/dist/angular-tour-tpls.min.js'
])
.pipe(uglify())
.pipe(concat('all.js'))
.pipe(gulp.dest(DIRDEST + 'lib/'));
gulp.src([DIRSOURCE + 'modules/module.js', DIRSOURCE + 'modules/**/*.js'])
.pipe(concat('app.js'))
.pipe(gulp.dest(DIRDEST + 'modules'));
});
对于我的CSS
gulp.task('less', function () {
gulp.src([DIRSOURCE + 'assets/less/sce.less'])
.pipe(less())
.pipe(minifyCSS())
.pipe(rename("style.css"))
.pipe(gulp.dest(DIRDEST + 'assets/css'));
});
由于应用程序加载时没有错误,上述所有功能似乎都可以正常工作。当我试图从引导ui
库中添加手风琴时,出现了问题:
我有以下模板文件-sidebar.html
。我想在这里添加手风琴。我有以下标记:
此内容在模板中是直接的。
{{group.content}
uib手风琴组的主体会随着内容的增长而增长
添加项
{{item}}
请单击下面的按钮删除您的帐户
删除
我也可以有标记!
这只是一些用来说明奇特标题的内容。
将控制器分配给视图的路径如下:
var main = {
name: "MainPage",
url: "/",
title: '`Homepage',
views: {
"mainContent": {
templateUrl: "modules/main/template/home.html",
controller: "MainPageController"
},
"sidebar":{
templateUrl: "modules/main/template/sidebar.html",
controller: "SidebarController"
}
}
};`
这是与sidebar.html关联的控制器
application.controller('SidebarController', ['$scope', '$rootScope', '$http', '$state', function ($scope, $rootScope, $http, $state, $translate) {
console.log('Sidebar controller');
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function () {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
}]);
我的应用程序与application.js中所需的库一起声明,如下所示:
var application = angular.module('sceDemo', ['ui.bootstrap', 'ngAnimate', 'ui.router', 'ngSanitize', 'pascalprecht.translate', 'ui.select', 'angular-tour']);
但是当我跑的时候
gulpclean&gulp&gulp&gulp服务器
然后在浏览器中加载我的应用程序应该显示手风琴的区域似乎再次加载了index.html
文件,当我查看控制台时,我看到以下错误消息:
warning: tried to load angular more than once
我不知道问题是什么,我所确定的是,它是由尝试添加手风琴引起的,因为当我移除手风琴时,问题就解决了。非常感谢您的帮助
我希望我已经提供了足够的信息。如果没有,请要求,我会提供
谢谢 我遇到了同样的问题,最终发现这是因为我的body元素上有一个ng视图。我只是检查了我的标记,但body上没有一个ng视图,所以我不知道这是否是本例中的原因!看这个问题。可能是有帮助的u:也可能是路线不匹配的问题,然后每次调用默认路线时都会调用angular Library,这可能与在一条路线中加载两个模板有关吗?