不知道指令範圍的內部元素

我希望下拉列表顯示何時將鼠標懸停在<cart>指令上。 mouseover事件肯定是發射並將scope.showDropdown更改爲true，因爲它應該如此，但<div class="cart">似乎並未意識到這一點，即使我將showDropdown的範圍設置爲'='。我是一個有自定義指令的初學者。我在這裏錯過了什麼？不知道指令範圍的內部元素

.directive('cart', ['Cart', function(Cart){ 
return { 
    templateUrl: './templates/cart.html', 
    restrict: 'E', 
    scope: { 
     showDropdown: '=' 
    }, 
    link: function(scope, element, attrs){ 
     scope.showDropdown = false; 
     scope.items = Cart.getItems; 
     element.bind('mouseenter', function(){ 
      scope.showDropdown = true; 
     }); 
     element.bind('mouseout', function(){ 
      scope.showDropdown = false; 
     }) 
    } 
} 
}]); 

app.controller('cartController', ['$scope', function($scope){ 
    $scope.showDropdown = false; 
}])

和cart.html

<cart ng-controller="cartController"> 
Cart 
    <div class="cart" ng-show="showDropdown"> 
     <ul> 
      <li rg-repeat="item in items">{{item.name}}</li> 
     </ul> 
    </div> 
</cart>

來源

2014-04-08 Tules

你需要把它作爲參數傳遞給你的指令：

<div class="cart" show-dropdown="showDropdown" ng-show="showDropdown">

但我認爲最好的辦法是把NG-秀你的模板。你不能隱藏指令的所有元素，否則你怎麼能觸發mouseover事件？

來源

2014-04-08 09:40:42

呀，這僅僅是一種工作模式，我其實用的是「車」，以鼠標懸停，但由於某種原因，我省略了它在模板中，將會有更多。我的指令默認共享繼承父控制器的作用域，所以錯了？你只能通過屬性把東西變成指令？ – Tules

要麼你定義一個作用域（'scope：{...}'）並且它變得孤立了（那麼你只能通過$ parent.propName訪問你的父作用域的屬性），或者通過你在你的指令中定義的屬性你創建一個新的（非孤立的）作用域（'scope：true'），你可以通過原型繼承來訪問你父級的屬性，或者你不創建一個新的作用域。 –

原來的問題是，我沒有將所做的更改應用於範圍。最後，我不需要使用控制器或屬性。

.directive('cart', ['Cart', function(Cart){ 
return { 
    templateUrl: './templates/cart.html', 
    restrict: 'E', 
    scope: '=', 
    link: function(scope, element, attrs){ 
     scope.items = Cart.getItems; 
     element.bind('mouseenter', function(){ 
      scope.$apply('showDropdown = true'); 
     }); 
     element.bind('mouseout', function(){ 
      scope.$apply('showDropdown = false'); 
     }) 
    } 
} 
}]); 

<cart> 
Cart 
    <div class="cart ng-hide" ng-show="showDropdown"> 
     <ul> 
      <li rg-repeat="item in items" class="ng-binding"></li> 
     </ul> 
    </div> 
</cart>

來源

2014-04-08 13:18:14 Tules

'範圍：'=''沒有任何意義恕我直言。我相信你可以刪除它。 +如果你真的只想這樣做，你可以使用CSS更容易。 '.cart .cart-items {visibility：hidden; } .cart：hover .cart-items {visibility：visible; }' –

不知道指令範圍的內部元素

回答

相關問題