Question

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

Answer 1

cart.html 당신은 당신의 지시에 인수로 전달해야합니다

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

그러나 나는 최선의 해결책에 NG-쇼를 넣어하는 것입니다 생각 귀하의 템플릿. 지시어의 모든 요소를 ​​숨길 수는 없습니다. 그렇지 않으면 mouseover 이벤트를 어떻게 트리거 할 수 있습니까?

Answer 2

내가 만든 변경 사항을 범위에 적용하지 못했던 것이 문제였다. 결국에는 컨트롤러 나 속성을 사용할 필요가 없었습니다.

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