1

我已经为 bootstrap popover 编写了一个指令。popover 指令本身工作正常，但是当我将它与 ngOptions 一起使用时，ngOptions 不起作用并且不会将数据绑定到选择属性。指令代码在这里：

app.directive("ngPopover", function () {
    return {
        restrict: "A",
        scope: { popoverVisible: '=', popoverTitle: "=", popoverContent: "=", popoverTrigger: "@", popoverPlacement: "@" },
        link: function (scope, iElement, iAttrs) {
            if (scope.popoverTrigger) {
                $(angular.element(iElement)).popover({
                    title: scope.popoverTitle,
                    content: scope.popoverContent,
                    trigger: (scope.popoverTrigger) ? scope.popoverTrigger : "manual",
                    placement: (scope.popoverPlacement) ? scope.popoverPlacement : "right"
                });
            }
            scope.$watch(function () { return scope.popoverVisible; }, function () {
                $(angular.element(iElement)).popover('destroy');
                $(angular.element(iElement)).popover({
                    title: scope.popoverTitle,
                    content: scope.popoverContent,
                    trigger: (scope.popoverTrigger) ? scope.popoverTrigger : "manual",
                    placement: (scope.popoverPlacement) ? scope.popoverPlacement : "right"
                });
                if (scope.popoverVisible)
                    $(angular.element(iElement)).popover('show');
                else
                    $(angular.element(iElement)).popover('hide');
            });
        }
    };
});

这是我的视图代码：

<div ng-app="app">
    <div ng-controller="Ctrl">
        <button class="pop btn btn-danger" ng-click="show()">Show</button>
        <br />
        <select id="select" ng-options="act for act in activities" ng-model="activity" ng-popover
            popover-visible="visPopover" popover-content="'Content'">
        </select>
        <br />
        <button ng-click="hide()">Hide</button>
    </div>
</div>

这是我的控制器功能：

function Ctrl($scope) {
    $scope.visPopover = false;
    $scope.activities = ['a1', 'a2', 'a3'];
    $scope.activity = 'a1';
    $scope.hide = function () {
        $scope.visPopover = false;
    };
    $scope.show = function () {
        $scope.visPopover = true;
    };
}

如果我的代码中有任何其他问题或不良做法（特别是在编写指令中），请告诉我！

更新：

小提琴链接：http: //jsfiddle.net/alisabzevari/sZbjt/1/

4

2 回答 2

1

斯图维是对的！ AngularJS 开发者指南：

如果同一元素上的多个指令请求一个新范围，则只会创建一个新范围。

所以我根本没有使用范围。我从属性中获得了所有指令属性。唯一的窍门是我必须看到我的一个属性popover-visible。这是指令代码：

app.directive("ngPopover", function () {
            return {
                restrict: "A",
                link: function (scope, iElement, iAttrs) {
                    if (iAttrs.popoverTrigger) {
                        $(angular.element(iElement)).popover({
                            title: iAttrs.popoverTitle,
                            content: iAttrs.popoverContent,
                            trigger: (iAttrs.popoverTrigger) ? iAttrs.popoverTrigger : "manual",
                            placement: (iAttrs.popoverPlacement) ? iAttrs.popoverPlacement : "right"
                        });
                    }
                    scope.$watch(function () { return iAttrs.popoverVisible; }, function () {
                        $(angular.element(iElement)).popover('destroy');
                        $(angular.element(iElement)).popover({
                            title: iAttrs.popoverTitle,
                            content: iAttrs.popoverContent,
                            trigger: (iAttrs.popoverTrigger) ? iAttrs.popoverTrigger : "manual",
                            placement: (iAttrs.popoverPlacement) ? iAttrs.popoverPlacement : "right"
                        });
                        if (scope.$eval(iAttrs.popoverVisible))
                            $(angular.element(iElement)).popover('show');
                        else
                            $(angular.element(iElement)).popover('hide');
                    });
                }
            };
        });
于 2013-07-28T07:25:26.983 回答
0

这是修复。诀窍是将 ng-popover 与 select 分开。

<div ng-app="App">
    <div ng-controller="Ctrl">
        <button class="pop btn btn-danger" ng-click="show()">Show</button>
        <br />
        <ng-popover popover-visible="visPopover" popover-content="'Content'"></ng-popover>
        <select id="select" ng-options="act for act in activities" ng-model="activity"></select>
        <br />
        <button ng-click="hide()">Hide</button>
    </div>
</div>

var app = angular.module('App', []);
app.directive("ngPopover", function () {
    return {
        restrict: "E",
        scope: {
            popoverVisible: '=',
            popoverTitle: "=",
            popoverContent: "=",
            popoverTrigger: "@",
            popoverPlacement: "@"
        },
        link: function (scope, iElement, iAttrs) {
            scope.$watch(function () {
                return scope.popoverVisible;
            }, function () {
                var s = iElement.parent().find("select");
                $(s).popover('destroy');
                $(s).popover({
                    title: scope.popoverTitle,
                    content: scope.popoverContent,
                    trigger: (scope.popoverTrigger) ? scope.popoverTrigger : "manual",
                    placement: (scope.popoverPlacement) ? scope.popoverPlacement : "right"
                });
                if (scope.popoverVisible) $(s).popover('show');
                else $(s).popover('hide');
            });
        }
    };
}).controller("Ctrl", function ($scope) {
    $scope.visPopover = false;
    $scope.activities = ['a1', 'a2', 'a3'];
    $scope.activity = 'a1';
    $scope.hide = function () {
        $scope.visPopover = false;
    };
    $scope.show = function () {
        $scope.visPopover = true;
    };
});

在这里试试。

于 2013-07-24T18:07:22.053 回答