Angularjs 不知道指令作用域的内部元素

我希望鼠标悬停在

指令上时显示下拉列表。

mouseover

事件肯定会触发并更改

范围。showDropdown

应该为true，但是

似乎没有意识到这一点，即使我将

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>

运货马车

{{item.name}

您需要将其作为参数传递给指令：

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

---

但我认为最好的解决办法是把ng秀放在你的模板中。您不能隐藏指令的所有元素，否则如何触发鼠标悬停事件？

原来问题是我没有将所做的更改应用到范围。最后，我不需要使用控制器或属性

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

指令（'cart'，['cart'，函数（cart）{ 返回{ templateUrl:'./templates/cart.html'， 限制：'E'， 作用域：'='， 链接：函数（范围、元素、属性）{ scope.items=Cart.getItems； bind（'mouseenter'，function（）{ 范围.$apply（'showDropdown=true'）； }); 元素绑定（'mouseout'，function（）{ 范围.$apply（'showDropdown=false'）； }) } } }]); 运货马车

---

是的，这只是一个工作模型，我实际上是在用“购物车”这个词来鼠标移动，尽管出于某种原因，我在模板中省略了它，还会有更多。默认情况下，I指令共享继承人父控制器的范围，那么这是错误的吗？您只能通过属性将内容放入指令中？您可以定义一个范围（

范围：{…}

）并将其隔离（然后您只能通过$parent.propName访问父范围的属性），或者通过您在指令中定义的属性创建一个新的（非隔离）范围（

scope:true

）并且您可以通过原型继承访问父对象的属性，或者您不创建新的作用域。

scope:'='

在IMHO中没有任何意义。我相信您可以删除它。+如果您真的只想这样做，您可以使用CSS轻松地完成。

.cart.cart items{visibility:hidden；}.cart:hover.cart项目{可见性：可见；}