javascript - 如何修改指令中 ng-repeat 创建的每个元素的单独范围？

Question

我正在尝试编写一个指令来简化 Angular 中的表格。我只希望用户向指令提供列表对象以及 html 中每个列表元素的格式，例如下面的 my-table 标签...

<h3>My Table</h3>
<div ng-controller='Ctrl as ctrl'>
<my-table items=ctrl.list>
    title: {{$item.title}}
    name: {{$item.name}}
</my-table>
</div> 

到目前为止，我已经找到了答案 here但我需要添加更多功能，但遇到了问题。在下面的 my-table 指令中，您可以在 link 函数中看到 html 模板。如何在每个列表元素的单独范围上设置变量？当鼠标悬停在该元素上时我应该能够修改它(使用 ng-mouseenter 和 ng-mouseleave )？我应该能够将它传递给我在模板中引用的 table-edit-panel 指令...

(function() {
    'use strict';

    angular
        .module('myApp')
        .directive('myTable', myTable);

    myTable.$inject = ['$compile'];

    function myTable($compile) {
        var directive = {
            transclude: true,
            scope: {    
                items: '='            
            },
            link: link  
        };
        return directive;

        function link(scope, elem, attr, ctrl, transclude) {

            scope.onMouseLeave = function(testvar) {
                testvar.state = "ready";
            };

            scope.onMouseEnter = function(testvar) {        
                testvar.state = "active";           
            };

            // not working, seems to be only one testvar rather than one for each element
            var template = 
                '<div ng-repeat="$item in items" ng-mouseenter="onMouseEnter(testvar)" ng-mouseleave="onMouseLeave(testvar)">' +
                    '<div class="row">' +                   
                    '<div class="col-md-10">' +
                        '<placeholder></placeholder>' +
                    '</div>' + 
                    '<div class="col-md-2">' +
                        '<table-edit-panel value="testvar"></table-edit-panel>' +
                    '</div>' +
                    '</div><hr/>' +
                '</div>';               

            var templateEl = angular.element(template);

            transclude(scope, function(clonedContent){
                templateEl.find("placeholder").replaceWith(clonedContent);

                $compile(templateEl)(scope, function(clonedTemplate){
                    scope.testvar = { state: "ready" }; // should be a testvar for each element of the list!
                    elem.append(clonedTemplate);
                });
            });
        }
    }
})();

您可以在 jsfiddle 上访问完整代码。您可以看到问题是，使用我当前的方法，当我将鼠标悬停在一个列表元素上时，所有列表元素的 testvar 变量都会发生变化，而不是我悬停在上面的那个。

Answer 1

使用 $item.testvar 而不是 testvar，您可以访问每个项目的子范围。

 var template = '<div ng-repeat="$item in items" ng-init="$item.testvar.state = \'ready\'" ng-mouseenter="onMouseEnter($item.testvar)" ng-mouseleave="onMouseLeave($item.testvar)">' +
    '<div class="row">' +                   
    '<div class="col-md-10">' +
        '<placeholder></placeholder>' +
    '</div>' + 
    '<div class="col-md-2">' +
        '<table-edit-panel value="$item.testvar"></table-edit-panel>' +
    '</div>' +
    '</div><hr/>' +
'</div>';   

但是，在这种情况下需要初始化这些状态变量。我添加了一个 ng-init 来实现此目的。虽然这是 ng-init 的少数预期用途之一，但我认为初始化 Controller 中的状态变量更干净。

更新(这次仅使用范围):

var template = 
    '<div ng-repeat="$item in items" ng-init="testvar.state = \'ready\'" ng-mouseenter="onMouseEnter(testvar)" ng-mouseleave="onMouseLeave(testvar)">' +
    '<div class="row">' +                   
    '<div class="col-md-10">' +
        '<placeholder></placeholder>' +
    '</div>' + 
    '<div class="col-md-2">' +
        '<table-edit-panel value="testvar"></table-edit-panel>' +
    '</div>' +
    '</div><hr/>' +
'</div>'; 

var templateEl = angular.element(template);

    transclude(scope, function(clonedContent){
        templateEl.find("placeholder").replaceWith(clonedContent);

        $compile(templateEl)(scope, function(clonedTemplate){

            // REMOVED THIS LINE:
            // scope.testvar = { state: "ready" };
            elem.append(clonedTemplate);

        });
    });