1

ブートストラップ ポップオーバーのディレクティブを作成しました。ポップオーバー ディレクティブ自体は正常に動作しますが、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 開発者ガイド:

同じ要素の複数のディレクティブが新しい​​スコープを要求する場合、新しいスコープは 1 つだけ作成されます。

そのため、スコープはまったく使用しませんでした。属性からすべてのディレクティブ プロパティを取得しました。唯一のトリックは、自分の属性の 1 つを 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 に答える