我试图弄清楚在angularjs中在哪里以及如何使用指令。我有几个页面，其中包含许多输入字段，每次我想添加一些条件ng-class和一个仅在特定条件下显示的按钮。可以在以下位置看到一个粗略的示例：
JSFiddle without directives
现在，我希望减少键入，并希望指令可以为我提供帮助。以下代码不起作用，但也许显示了我想去的地方：
这就是我想要输入html的方式：
<tr>
<td>First Name:</td>
<td>
<dirty-input attr="firstName"/>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<dirty-input attr="lastName"/>
</td>
</tr>
因此，我尝试使用以下控制器来实现此目的：
app.controller('PersonController', function($scope) {
$scope.person = {firstName: 'John', lastName: 'Doe'};
$scope.personEdited = {firstName: $scope.person.firstName, lastName: $scope.person.lastName};
$scope.firstName = {objName: 'person', editedObject: 'personEdited', attrName: 'firstName'};
$scope.lastName = {objName: 'person', editedObject: 'personEdited', attrName: 'lastName'};
});
和此指令：
app.directive('dirtyInput', function() {
return {
restrict: 'E',
scope: {
attr: '=attr',
},
template: '<input type="text" ng-model="{{attr.editedObject}}.{{attr.attrName}}"/>'
};
});
可以在以下位置看到：JSFiddle with directives (not working)
显然，这是行不通的。我是在尝试做一些不可能的事情，还是我做错了？
最佳答案
你很亲密！
需要更改的几件事：
在ngModel上，您必须引用范围中的属性。
代替：ng-model="{{attr.editedObject}}.{{attr.attrName}}
您应该具有以下内容：ng-model="attr.editedObject[attr.attrName]
（这意味着：“绑定到范围的attr属性所引用的对象的'editedObject'属性所引用的对象的名为x的属性。其中x是其名称等于attr'attrName的值的属性'属性。”）
好吧，无所谓了 ！
为了使隔离作用域能够访问实际编辑的对象（即personEdited），它需要对其进行引用。有两种方法可以实现此目的，但我认为最简单的方法是在firstname，lastname对象中放置对它的引用。例如。：
代替：$scope.firstName = {...editedObject: 'personEdited',...}
使用：$scope.firstName = {...editedObject: $scope.personEdited,...}
另请参见此short demo。