CODEWITHSUNDEEP
angularjsangularjs-directiveangular-strap
BigBosBil
BigBosBil

Reputation: 131

Angular Strap. Popover programmatic use

I'm trying to create programmatically popover, but faced with following problem. I can't access parent scope inside popover template. Expected result is:

Hello my name is Roman

but I get

Hello my name is undefined

Here is plunker

If I use bs-popover as attribute on any element, then I get expected result.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <title>Popover issue</title>
</head>

<body>
<div data-ng-app="myApp" data-ng-controller="defaultCtrl" style="margin: 100px 100px">
    <button custom-popover ng-click="showPopover()">Popover</button>

    <script type="text/ng-template" id="example.html">
        <p>My name is {{user.name || 'undefined' }}</p>
    </script>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.8/angular-sanitize.min.js" data-semver="1.3.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", ['mgcrea.ngStrap', 'ngSanitize']);
    app.controller("defaultCtrl", ["$scope", function($scope) {
        $scope.user = {
            name: "Roman"
        };
    }]);
    app.directive("customPopover", ["$popover", "$compile", function($popover, $compile) {
        return {
            restrict: "A",
            scope: true,
            link: function(scope, element, attrs) {
                var myPopover = $popover(element, {
                    title: 'My Title',
                    contentTemplate: 'example.html',
                    html: true,
                    trigger: 'manual',
                    autoClose: true
                });
                scope.showPopover = function() {
                    myPopover.show();
                }
            }
        }
    }]);
</script>
</body>
</html>

Thanks in advice

Upvotes: 2

Views: 6262

Answers (1)

dhavalcengg
dhavalcengg

Reputation: 4713

Checkout http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview

Prototype inheritance is default on scope in angular.

So if you are not creating isolated scope then you can access parent scope objects from your scope directly until and unless you are not overriding them.

 var myPopover = $popover(element, {
                    title: 'My Title',
                    contentTemplate: 'example.html',
                    html: true,
                    trigger: 'manual',
                    autoClose: true,
                    scope: scope
                });
                scope.showPopover = function() {
                    myPopover.show();
                }

Upvotes: 9

Related Questions