如何使用angularjs在popover中添加字段？答案

【问题标题】：how to add fields in popover using angularjs?如何使用angularjs在popover中添加字段？
【发布时间】：2015-08-12 01:21:24
【问题描述】：

这是我使用 Angular js 和我想知道我们如何在 custom-popover popover-HTML 中添加样式因为我无法在 HTML 部分中绑定任何元素

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-app="customDirectives">
    <div> <span custom-popover popover-html="Some Popover Text"  popover-placement="bottom" popover-label="label"></span>

    </div>
</div>
<script>
customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customPopover', function () {
    return {
        restrict: 'A',
        template: '<span>{{label}}</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;
            $(el).popover({
                trigger: 'click',
                html: true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement
            });
        }
    };
});

angular.module('CustomComponents', ['customDirectives']);
</script>
</body>
</html>

【问题讨论】：

如果没有模板也能运行，为什么还要使用模板..？
这个问题可能会对您有所帮助。 stackoverflow.com/questions/30523455/…
不，没有模板就不能运行，这是只有模板遵循的标准

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

检查此示例（将 popover-some-var 添加到您的代码中）：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-app="customDirectives">
    <div> <span custom-popover popover-html="Some Popover Text"  popover-placement="bottom" popover-label="label" popover-some-var="BLABLABLA"></span>

    </div>
</div>
<script>
customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customPopover', function () {
    return {
        restrict: 'A',
        template: '<span>{{label}}</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;
            var someVar = attrs.popoverSomeVar; // HERE IS VARIABLE
            $(el).popover({
                trigger: 'click',
                html: true,
                content: attrs.popoverHtml + " " + someVar,
                placement: attrs.popoverPlacement
            });
        }
    };
});

angular.module('CustomComponents', ['customDirectives']);
</script>
</body>
</html>

【讨论】：

谢谢它一定会帮助我:)