从AngularJS Controller调用jQuery函数

I have a below button when on clicked shows a small popup like notification

点击时我有一个下面的按钮显示一个像通知一样的小弹出窗口

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

My Intention is to Show this popup every few seconds without clicking the button, but from the AngularJS Controller.

我的意图是每隔几秒钟显示此弹出窗口，而不是单击按钮，而是从AngularJS控制器中显示。

 var showPop = function () {
    //how can i call that jQuery function here ??
    $timeout(showPop, 1000);
}
$timeout(showPop, 1000);

Tried with the below solution

试着用下面的解决方案

app.directive("showNotifications", ["$interval", function ($interval) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {          
            $interval(function () {
                $(elem).popover("open");
                alert('hi');
            }, 1000);
        }
    };
}]);

Also included the scripts

还包括脚本

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

using the directive like this

使用这样的指令

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

I see an error "the object has no method popover"

我看到一个错误“该对象没有方法弹出”

3 个解决方案

#1

Directives are used for DOM manipulation:

指令用于DOM操作：

<button show-notifications>

And the directive

和指令

.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);
        }
    }
}]);

#2

The following steps can be followed,

可以遵循以下步骤，

var jq = $.noConflict();

then create any regular angular module and controller and create a function inside the controller which we can use it for the calling any jquery function, e.g. I want to add a class to a div element.

然后创建任何常规角度模块和控制器，并在控制器内创建一个函数，我们可以将它用于调用任何jquery函数，例如，我想在div元素中添加一个类。

angular.module('myApp',[]).controller('hello',function($scope){
            $scope.name = 'Vikash';
            $scope.cities = ['Delhi','Bokaro','Bangalore'];

             $scope.hide = function(){
                jq('#hideme').addClass('hidden');   

            }
        });

and we will create some regular html to utilize that method with the controller.

我们将创建一些常规的html来与控制器一起使用该方法。

<body ng-controller="hello">
    <div class="container" id="hideme">
        Hello Dear
    </div>
    <button ng-click="hide()">Hide Hello</button>
</body>

Now here you can see that we are about call addClass method from the jQuery inside the function declared in the controller and part of the $scpe.

现在，您可以看到我们是关于在控制器中声明的函数内部的jQuery调用addClass方法以及$ scpe的一部分。

#3

Instead of a $ just place the key word angular

而不是$ just关键字的角度

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

#1