调用jQuery函数

我有一个按钮下当点击显示通知等一个小的弹出调用jQuery函数

<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>

我看到一个错误“的对象有没有方法酥料饼”

来源

2014-03-28 user804401

这种东西值得一个指令。不要把你的控制器中的ui逻辑。另外，不需要递归调用，angular现在支持'$ interval'。 –

指令用于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); 
     } 
    } 
}]);

来源

2014-03-28 13:36:26 tymeJV

我对此表示赞同，我将通过说'link'的主体应该调用'$ interval（showPopup，1000）'来扩展它，这真的是问题所在。 –

@JoeMinichino - 更新后显示点击和间隔 – tymeJV

我试过了代码，我发现错误“对象没有方法弹出”如果我把警报我能看到警报。我还包括了所有的脚本，我修改了代码，请看上面的 – user804401

只需将钥匙字角

angular.element("#id").val()

来源

2015-03-22 11:56:10

我想要使用像这样的angular.element（“＃btn”）。click（function（event）{alert（“hi”）;} ）;但jqLite不支持点击方法....什么可以是其他选项。请建议。 –

有没有必要使用jQuery的使用ng-click =“yourFunction（）”其中yourFunction（）在控制器中定义，如
$ scope.yourFunction = function（）{ alert（“hi”）; }; –

thanx it works –

可以遵循以下步骤

var jq = $.noConflict();

然后创建任何规则的角模块和控制器，并创建控制器，我们可以将其用于调用任何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>

现在，在这里你可以看到，我们对从jQuery在$ SCPE的控制器和部分声明的函数内部调用addClass方法。

来源

2015-10-17 21:23:58

这太好了。你也可以写出'jQuery'而不是'noConflict'，所以它看起来像这样：'jQuery（'＃hideme'）。addClass（'hidden'）;'' –

调用jQuery函数

回答

相关问题