ngOptions我的指令衝突並不起作用

Question

我已經寫了引導酥料餅的一個指令。 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

這裏是修復。訣竅是將select和ng-popover分開。

<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。