[英]Angular - how to call javascript function inside ng-view
我正在使用Angular JS构建单页应用程序。 这是我的档案
的index.html
<script src="js/dishesapp.js"></script>
<div ng-view></div>
dishestemplate.html
<script src="js/bxslider.js"></script> (which is for my image slider)
bxslider.js具有一些功能,并且
$(document).ready(function ()
{
$('.bxslider').bxSlider();
});
dishesapp.js
var dishesApp = angular.module('dishesApp', ['ngRoute']);
dishesApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'partials/default.html'})
.when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
.when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
.when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
.when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
.when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
.when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
.otherwise({redirectTo: '/'});
});
index.html成功加载了所有局部视图。 但是template.html无法加载javascript文件,因此滑块不起作用。 有办法解决这个问题吗?
$(document).ready(function (){})
不应与Angular结合使用。
您需要的是一个指令 。 为您的滑块创建一个指令,并在您的dishstemplate.html文件中使用。 在指令中,您调用jQuery插件。
在菜板上
<div my-slider></div>
您的指示
angular.module('yourAngularApp', [])
.directive('mySlider', function() {
return {
restrict: 'A',
template: '<div class="slider">The HTML for your slider</div>',
link: function (scope, element, attrs) {
element.bxSlider(); //call your plugin here!
}
};
});
将<script src="js/bxslider.js"></script>
移至index.html,并将以下脚本添加到dishtemplate.html的末尾/底部
<script>
$('.bxslider').bxSlider();
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.