从AngularJS控制器调用jQuery函数
从AngularJS控制器调用jQuery函数
提问于 2014-03-28 21:30:00
我有一个下面的按钮，当点击时会显示一个类似通知的小弹出窗口
<button id="element" type="button" onclick="ShowNotifications()" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text inside popup">Notifications</button>
<script type="text/javascript">
function ShowNotifications() {
$('#element').popover('open');
}
</script>我的目的是在不单击按钮的情况下，但在AngularJS控制器中每隔几秒钟显示一次此弹出窗口。
var showPop = function () {
//how can i call that jQuery function here ??
$timeout(showPop, 1000);
}
$timeout(showPop, 1000);尝试使用以下解决方案
app.directive("showNotifications", ["$interval", function ($interval) {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$interval(function () {
$(elem).popover("open");
alert('hi');
}, 1000);
}
};
}]);<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/postsService.js"></script>
<script src="js/directive.js"></script>
<script src="js/controllers.js"></script>使用像这样的指令
<button id="element" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Friend request 1" **show-notifications**>Live Notifications</button>我看到一个错误“该对象没有方法弹出窗口”
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-28 21:36:26
指令用于DOM操作：
<button show-notifications>和指令
.directive("showNotifications", ["$interval", function($interval) {
return {
restrict: "A",
link: function(scope, elem, attrs) {
//On click
$(elem).click(function() {
$(this).popover("open");
});
//On interval
$interval(function() {
$(elem).popover("open");
}, 1000);
}
}
}]);Stack Overflow用户
发布于 2015-10-18 05:23:58
可以按照以下步骤操作：
var jq = $.noConflict();然后创建任何常规的angular模块和控制器，并在控制器内创建一个函数，我们可以使用它来调用任何jquery函数，例如，我想向div元素添加一个类。
angular.module('myApp',[]).controller('hello',function($scope){
$scope.name = 'Vikash';
$scope.cities = ['Delhi','Bokaro','Bangalore'];
$scope.hide = function(){
jq('#hideme').addClass('hidden');
}
});我们将创建一些常规的html，以便在控制器中使用该方法。
<body ng-controller="hello">
<div class="container" id="hideme">
Hello Dear
</div>
<button ng-click="hide()">Hide Hello</button>
</body>现在你可以看到，我们要从控制器和$scpe中声明的函数内部的jQuery中调用addClass方法。
Stack Overflow用户
发布于 2015-03-22 19:56:10
只需放置关键字angular而不是$
angular.element("#id").val()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22714286
复制相关文章
相似问题