我有一个简单的网站,实现了jQuery,以便创建一个滑块与一些图像在Index.html的顶部横幅。
现在,我想使用AngularJS,所以我将代码分解成单独的部分。
如果我在原始版本中运行Index.html (没有应用AngularJS模式),那么我可以看到滑块工作得很好。
在应用AngularJS模式时,我将顶部横幅HTML移动到部分html,然后将ng-view应用到顶部横幅最初所在的div。
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html'}).
when('/contact',{templateUrl:'app/partials/contact.html'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});
当我刷新页面时,滑块不工作,呈现为简单的html,没有任何jQuery效果,真的是一团糟。
这个部分有一些通常由document.ready激活的jQuery插件。但此事件不会在ng-view中的角度负载部分时触发。如何调用此事件来初始化jQuery插件?
有什么线索可以解决这个问题吗?
感谢任何人的帮助。
发布于 2014-08-05 08:21:52
当您指定路由时,还可以指定一个控制器,因此您的路由将如下所示:
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
});
现在,您可以在每个控制器中以jquery的方式定义您想要做的事情,作为函数的一部分,如下所示:
angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {
$scope.load = function() {
// do your $() stuff here
};
//don't forget to call the load function
$scope.load();
}]);
讲得通?
发布于 2014-08-27 03:35:57
其他提供的答案可以工作,但它们绑定到控制器,因此不具有可伸缩性和可重用性。
要像注释中提到的那样使用真正的"Angular“方式,您应该使用指令。这样做的好处是,您可以使用相同的代码创建多个实例,并可以将属性传递给指令逻辑以“定制”指令。下面是我使用bxSlider插件使用它的一个示例:
JS:
app.directive('slider', ['$rootScope', function($rootScope) {
return {
restrict: 'EA',
templateUrl: '/path/to/template',
link: function(scope, iElement, attrs) {
//attrs references any attributes on the directive element in html
//iElement is the actual DOM element of the directive,
//so you can bind to it with jQuery
$(iElement).bxSlider({
mode: 'fade',
captions: true
});
//OR you could use that to find the element inside that needs the plugin
$(iElement).find('.bx-wrapper').bxSlider({
mode: 'fade',
captions: true
});
}
};
}]);
HTML:
<div slider some-attibute="some-attribute"></div>
在您的指令模板中,您可以拥有滑块包装和幻灯片,您可以使用绑定到作用域数据的ng-repeat动态构建它们。
我建议阅读这篇excellent article by Dan Wahlin,了解如何创建自定义指令以及如何充分利用它们的强大功能。
发布于 2017-03-16 22:58:24
我也有同样的问题,我在ng-include中加载了一些导航链接,我有一个脚本文件,在我的index.html上调用了jquery指令来激活链接,但我看不到包含的内容。
我尝试了上面所有的解决方案,但由于某些原因,它们都不适用于我。如果没有包含内容(直接在index.html中),jquery就会正常工作,但是一旦包含了内容,它就无法识别我的元素。
因此,我只需将指令包装在setTimeout()函数中,它就起作用了!也许它也能为你工作?
setTimeout(function() {
$("nav ul li").click(function() {
$("nav ul li").removeClass('active');
$(this).addClass('active');
});
});
不知何故,setTimeout()会在angular加载完包含的内容后加载脚本。
祝大家编码愉快!
https://stackoverflow.com/questions/22275590
复制相似问题