Question

是否可以在ng-repeat中获取元素的单击行（范围），而不需要输入名称？

例如：scope.person有效，但当我将人员换成另一个名字时，我无法使用我的指令全局。

我需要数据进行如下编辑：http://vitalets.github.io/x-editable/

我将编写一个指令，将文本更改为输入字段。为了保存它，我需要字段的名称，＆＃34;姓氏＆＃34;在示例中和行中的ID。

HTML：

<tr ng-repeat="person in persons | orderBy:lastname">
    <td class="editable">{{person.lastname}}</td>
    <td>{{person.surname}}</td>
</tr>

指令：

app.directive('editable', [function () {
    return {
        restrict: 'C',
        link: function (scope, elem, attrs) {
            elem.bind('click', function(event) {
                console.log(scope.person)
            });
        }
    };
}])

Answer 1

您可以按$index使用Angular跟踪ng-repeat并将其传递给您的指令：

HTML：

<tr ng-repeat="person in persons | orderBy:lastname">
    <td editable="$index" class="editable">{{person.lastname}}</td>
    <td>{{person.surname}}</td>
</tr>

指令：

app.directive('editable', [function () {
    return {
       restrict: 'A',
       link: function (scope, elem, attrs) {
           elem.bind('click', function(event) {
               console.log(attrs.Editable);
           });
       }
    };
}])

Answer 2

您已经捕获了当前范围，并且工作正常，您只需要操作数据并应用范围。$ apply（）;

app.directive('editable', [function () {
    return {
        restrict: 'C',
        link: function (scope, elem, attrs) {
            elem.bind('click', function(event) {
              console.log(scope.person)
              scope.person.surname="hello"
                 console.log(scope.person)
                 scope.$apply();
            });
        }
    };
}])

在第一个控制台输出中，您可以看到原始的单击元素，在第二个控制台中，您可以看到maupilated数据。

现在为什么需要应用： - 需要运行angular的摘要循环以适应在角度js范围之外发生的变化（bind是jquery事件而不是angular的）。

Plunker

Answer 3

向指令添加范围，以便您可以传递任何要编辑的模型。并使用Attrs变量显示ID。

app.directive('editable', [function () {
return {
    scope: {
        model : '='
    },
    restrict: 'C',
    link: function (scope, elem, attrs) {
        elem.bind('click', function(event) {
            alert(scope.model +" "+ attrs.id )
        });
    }
};}]);

html：

<span class="editable" model="person.lastname" id="{{$index}}">{{person.lastname}}</span>

The Fiddle

Answer 4

浏览角度定制指令的工作原理。您可以通过链接中的'attrs'将lastname传递给参数。像这样：

html代码：

<my-first-directive lastname="{{person.lastname}}"></my-first-directive>

自定义指令代码：

link: function (scope, elem, attrs) {
        elem.bind('click', function(event) {
            console.log(attrs['lastname'])
        });
}

这种方法在我看来并不好。但我希望它对你有用。

如果您阅读指令中的范围，您可以尝试其他方法。您可以将相同的参数传递给指令范围。

在你的指令中：

return {
    restrict: 'C',
    scope: {
        lastname: '=' // If you want know more about this, read about scopes in directives
    }
    link: function (scope, elem, attrs) {
        elem.bind('click', function(event) {
            console.log(scope.lastname) // now, scope.lastname is in your directive scope
        });
    }
};

使用指令时请小心使用名称。如果你的变量是'myVar'，当你编写指令html代码时，你需要写：

<my-first-directive my-var="myVar"></my-first-directive>

出于同样的原因，当你的name指令是'myFirstDirective'时你需要写'my-first-directive'。

祝你好运！

在ng-repeat中查找单击元素的范围

4 个答案: