Question

我已经为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/

Answer 1

Stewie是对的！ AngularJS Developer guide：

如果同一元素上的多个指令仅请求新范围创建了一个新范围。

所以我根本没有使用范围。我从属性中获取了所有指令属性。唯一的诀窍是我必须看到我的一个属性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');
                    });
                }
            };
        });

Answer 2

这是修复。诀窍是将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;
    };
});

试试here。

ngOptions与我的指令冲突，不起作用

2 个答案: