Angularjs 指令中的访问范围变量？

我在angular是个书呆子，正在创建一个基本的TODO应用程序。在本文中，当鼠标进入通过

todoListItem

指令呈现的

li

项时，我试图显示

delete

。我还有另外两个指令

mouseEnter

和

mouseLeave

，从这个

mouseEnter

我如何更改

todo.showDelete

angular.module('ToDo.directives', [])
    .directive('todoListItem', function() {
        return {
          restrict: 'E',
          template: "<li mouse-enter mouse-leave ng-repeat='todo in Todos | filter:searchText' class='todoList' ><input type='checkbox' ng-model='todo.done' /> <i ng-class=(todo.done) ? 'lineThrough' : ''>{{todo.text}}</i><a ng-show='todo.showDelete' >D</a></li>"
        };
    })
    .directive("mouseEnter", function () {
        return function (scope, element, attrs) {
            element.bind("mouseenter", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    })
    .directive("mouseLeave", function () {
        return function (scope, element, attrs) {
            element.bind("mouseleave", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    });

角度模块（'ToDo.directives'，[]） .directive（'todoListItem'，function（）{ 返回{ 限制：'E'， 模板：“

{{todo.text}}}D

” }; }) .指令（“鼠标指针”，函数（）{ 返回函数（范围、元素、属性）{ 元素绑定（“mouseenter”，函数（）{ //如何从这里更改'todo.showDelete'？ }) } }) .指令（“mouseLeave”，函数（）{ 返回函数（范围、元素、属性）{ 元素绑定（“mouseleave”，函数（）{ //如何从这里更改'todo.showDelete'？ }) } });

---

您可以在指令中使用Angular的双向绑定，并具有如下功能：

angular.module('ToDo.directives', [])
    .directive('todoListItem', function() {
        return {
          restrict: 'E',
          scope:{
             "todo":"="
          },
          template: "<li mouse-enter mouse-leave ng-repeat='todo in Todos | filter:searchText' class='todoList' ><input type='checkbox' ng-model='todo.done' /> <i ng-class=(todo.done) ? 'lineThrough' : ''>{{todo.text}}</i><a ng-show='todo.showDelete' >D</a></li>"
        };
    })
    .directive("mouseEnter", function () {
        return function (scope, element, attrs) {
            element.bind("mouseenter", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    })
    .directive("mouseLeave", function () {
        return function (scope, element, attrs) {
            element.bind("mouseleave", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    });

<todo-list-item todo="todo"></todo-list-item>

角度模块（'ToDo.directives'，[]） .directive（'todoListItem'，function（）{ 返回{ 限制：'E'， 范围：{ “待办事项”：“=” }, 模板：“

{{todo.text}}}D

” }; }) .指令（“鼠标指针”，函数（）{ 返回函数（范围、元素、属性）{ 元素绑定（“mouseenter”，函数（）{ //如何从这里更改'todo.showDelete'？ }) } }) .指令（“mouseLeave”，函数（）{ 返回函数（范围、元素、属性）{ 元素绑定（“mouseleave”，函数（）{ //如何从这里更改'todo.showDelete'？ }) } }); 在HTML中，您需要有如下内容：

angular.module('ToDo.directives', [])
    .directive('todoListItem', function() {
        return {
          restrict: 'E',
          scope:{
             "todo":"="
          },
          template: "<li mouse-enter mouse-leave ng-repeat='todo in Todos | filter:searchText' class='todoList' ><input type='checkbox' ng-model='todo.done' /> <i ng-class=(todo.done) ? 'lineThrough' : ''>{{todo.text}}</i><a ng-show='todo.showDelete' >D</a></li>"
        };
    })
    .directive("mouseEnter", function () {
        return function (scope, element, attrs) {
            element.bind("mouseenter", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    })
    .directive("mouseLeave", function () {
        return function (scope, element, attrs) {
            element.bind("mouseleave", function () {
                // how can i change `todo.showDelete` from here ?
            })
        }
    });

<todo-list-item todo="todo"></todo-list-item>

现在您可以更改指令中scope的todo变量，该变量也将反映指令外部