角表带。酥料饼的程序中使用 [英] Angular Strap. Popover programmatic use

查看:109
本文介绍了角表带。酥料饼的程序中使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图创造编程酥料饼,但面临着以下问题。我不能酥料饼的模板内访问父范围。预期的结果是:

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

但我得到

Hello my name is undefined

下面是 plunker

如果我用 BS-酥料饼作为任何元素的属性,然后我得到预期的结果。

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>

谢谢意见

推荐答案

结帐<一个href=\"http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=$p$pview\">http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=$p$pview

原型继承是范围默认棱角分明。

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();
                }

这篇关于角表带。酥料饼的程序中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆