将JQuery owl-旋转木马与角单页应用相结合
将JQuery owl-旋转木马与角单页应用相结合
提问于 2016-08-15 19:45:57
我希望在我的角js单页应用程序中有一个JQuery owl对象。
这是以角表示的代码：
index.html：
<!DOCTYPE html>
<html>
<title>Small Talkz</title>
<head>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="small-talkz.model.js"></script>
<script src="components/chat/chatController.js"></script>
<script src="components/login/loginController.js"></script>
<script src="../assets/js/owl.carousel.js"></script>
<link rel="stylesheet" href="../assets/css/jumbotron.css">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/owl.carousel.css">
<link rel="stylesheet" href="../assets/css/owl.theme.css">
</head>
<body>
<div ng-app="smallTalkzModel" class="loader">
<div ui-view>
</div>
</div>
</body>
</html>这就是角路由发生的地方：
small-talkz.model.js
var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router']);
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.state('chat', {
url: '/chat',
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
})
.state('carousel', {
url: '/carousel',
templateUrl : 'components/carousel/carouselView.html',
controller : 'carouselController'
})
$urlRouterProvider.otherwise('/login');
});这是carouselView.html
<body>
<div id="carousel_demo">
<div id="owl-example" class="owl-carousel">
<div> Content1 </div>
<div> Content2 </div>
<div> Content3 </div>
</div>
</div>
</body>这是carouselController.js
smallTalkzModel.controller('carouselController', ['$scope',
function($scope){
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
}]);但是当我进入页面(localhost:3000/#/carousel)时，我什么也没看到。
在的工具控制台(F12)上，我甚至没有发现一个错误。
我认为JQuery $(Document).ready(.)的组合有问题但是我不知道有什么问题..。
请帮我弄清楚。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-15 19:48:13
您需要从角度内部使用jQuery。
angular.module("app",[]).controller("ctrl",function($scope){
$(document).ready(function() {
$("#owl-example").owlCarousel();
})Stack Overflow用户
发布于 2017-03-14 07:12:26
用下面的代码解决它
angular.module("app",[]).controller('owlController', owlController);
function owlController() {
setTimeout(function(){
$(#owl-example).owlCarousel({
items : 3,
itemsCustom : false,
itemsDesktop : [1199,2],
itemsDesktopSmall : [980,2],
itemsTablet: [768,2],
itemsTabletSmall: [767,1],
itemsMobile : [479,1],
singleItem : false,
itemsScaleUp : false,
navigation : true,
navigationText : ["",""],
pagination : false
});
}, 0);
}在模板中做
<div id="carousel_demo" ng-controller="owlController">
<div id="owl-example" class="owl-carousel">
<div> Content1 </div>
<div> Content2 </div>
<div> Content3 </div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38961955
复制相关文章
相似问题
腾讯云开发者
