Javascript 使用angularjs中的指令进行模板化

我试图找出在angularjs中在何处以及如何使用指令。我有几个页面有很多输入字段，每次我想添加一些条件ng类和一个只在特定条件下显示的按钮。可以在以下位置看到一个粗略的示例：

现在我想少打字，希望指令能帮助我。下面的代码不起作用，但它可能显示了我要去的地方：

以下是我希望键入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.directive('dirtyInput', function() {
    return {
        restrict: 'E',
        scope: {
            attr: '=attr',
        },
        template: '<input type="text" ng-model="{{attr.editedObject}}.{{attr.attrName}}"/>'
    };
});

myApp.directive('myDirtyInput', function () {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'DirtyInput.html',
    controller: '@',
    name: 'ctrl'
  };
});

app.directive（'dirtyInput'，function（）{
返回{
限制：'E'，
范围：{
属性：'=attr'，
},
模板：“”
};
});

这可以在以下网址看到：

---

显然，这是行不通的。我是在尝试做一些不可能的事情，还是我只是做错了？

你很接近

有几件事需要改变：

在

ngModel

上，您必须引用范围中的属性。
而不是：

ng model=“{{attr.editedObject}.{{attr.attrName}}

您应该有如下内容：

ng model=“attr.editedObject[attr.attrName]

（这意味着：“绑定到由作用域的

attr

属性引用的对象的'editedObject'属性引用的对象的名为x的属性。其中x是名称等于

attr

的'attrName'属性值的属性。”）
是的，随便

为了使隔离作用域能够访问实际编辑的对象（即

PersonEded

），它需要一个对它的引用。有几种方法可以实现这一点，但我认为最简单的方法是在

firstname

，

lastname

对象中放置对它的引用。例如：
而不是：

$scope.firstName={…editedObject:'PersoneEded'，…}

用法：

$scope.firstName={…编辑对象：$scope.personEdited，…}

---

另请参见此

您误解了隔离作用域的工作原理。指令的模板正在尝试访问其隔离作用域上的

{{attr.editedObject}.{{attr.attrName}

。让我们假设angular将

{{attr.editedObject}.{{attr.attrName}}

解析为

personEdited.firstName

。现在考虑隔离范围，它当前由单个属性组成，当您的指令解析

PersonEditiond.firstName

时，它会在其隔离范围内查找，并且只会看到

attr

。因为

personedid

未定义，所以不会发生任何事情。为了使其工作，您必须在隔离范围中包含另一个属性，该属性在您的控制器范围中分配了PersonEdition的值。该属性需要命名为

PersonEditiond

：

scope: {
  attr: '=attr',
  personEdited: '=personEdited'
}

然后您需要在指令用法中指定它：

现在，您的隔离作用域将可以访问您的

PersonControl

中定义的

PersonEditiond

对象。希望这有帮助

编辑

考虑一下这个问题后，您可能想尝试指令中的控制器。根据我对您的问题的猜测，您真正想要的是访问

PersonController

的范围。您可以使用指令中的以下语法完成此操作：

app.directive('dirtyInput', function() {
    return {
        restrict: 'E',
        scope: {
            attr: '=attr',
        },
        template: '<input type="text" ng-model="{{attr.editedObject}}.{{attr.attrName}}"/>'
    };
});

myApp.directive('myDirtyInput', function () {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'DirtyInput.html',
    controller: '@',
    name: 'ctrl'
  };
});

这里需要注意的两件事是控制器属性和名称属性。它们告诉angular js的是，我们将允许指令的用户绑定一个控制器供我们使用，它将通过在指令声明中定义

ctrl

属性来分配。因此，在我们的例子中，这将看起来像：

<my-dirty-input ctrl="PersonController"></my-dirty-input>

现在，当控制器绑定到指令时，我们可以从指令中完全访问控制器范围。我们不必创建隔离作用域，只需开始访问控制器的属性即可

---

下面是一个plunker的例子，我猜你的目标是什么（根据你发布的小提琴）：

我喜欢这种方法，但我无法让它发挥作用。你能看看这个JSFIDLE的错误吗：对不起，这不是我真正想要的。如我的JSFIDLE示例所示，我希望在一个控制器的范围内有多个输入字段。我的计划是这样指定一个字段名：而不是为每个字段名创建一个控制器。