Javascript AngularJS指令的多个实例具有不同的数据？

我有一个指令，它基本上为输入生成一个标签标签。它用我的模板替换指令，并确保父节点和下一个节点具有我所需的正确属性和类

.directive('placeHolder', function() {
    return {
    restrict: 'E',
    replace: true,
    template: '<label for="{{input}}" class="placeholder-label">{{label}}</label>',

    link: function ($scope, elem, attrs) {
      $scope.label = attrs.label;
      $scope.input = attrs.input;
      //check if the parent element is a div, then set the class to make it's position relative
      if(elem.parent().nodeName === 'DIV') {
        elem.parent().addClass('placeholder-parent');
      }

      //check if the next element is an input or textarea
      if(elem.next().nodeName === 'INPUT' || elem.next().nodeName === 'TEXTAREA') {
        //ensure the id of the input/textarea is the same as the for value in the label, else set it so
        if(elem.next().attr('id') === input) {
          return
        } else {
          elem.next().attr('id', input)
        }
      }
    }
  };

});

.directive（'placeHolder'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“{label}}”，
链接：函数（$scope、elem、attrs）{
$scope.label=attrs.label；
$scope.input=attrs.input；
//检查父元素是否为div，然后将类设置为使其位置相对
if（elem.parent（）.nodeName==='DIV'）{
elem.parent（）.addClass（'placeholder-parent'）；
}
//检查下一个元素是输入区还是文本区
if（elem.next（）.nodeName=='INPUT'| | elem.next（）.nodeName=='TEXTAREA'）{
//确保输入/文本区域的id与标签中的for值相同，否则将其设置为相同
if（elem.next（）.attr（'id'）==输入）{
返回
}否则{
elem.next（）.attr（'id'，输入）
}
}
}
};
});

我的问题是，我在同一页上有两个输入，因此同一指令有两个实例，而这两个实例导致相同的标签可见

---

下面是一个fiddle

您需要使用指令的scope属性：

如果属性的名称相同：

    scope: {
      label: '@',
      input: '@'
    }

或者您可以定义自定义项：

    scope: {
      myLabel: '=label',
      myInput: '=input'
    },

您的代码示例已修改：

app.directive('placeHolder', function() {
    return {
    restrict: 'E',
    replace: true,
    template: '<label for="{{input}}" class="placeholder-label">{{label}}</label>',
    scope: {
      label: '@',
      input: '@'
    },
    link: function ($scope, elem, attrs) {
      //check if the parent element is a div, then set the class to make it's position relative
      if(elem.parent().nodeName === 'DIV') {
        elem.parent().addClass('placeholder-parent');
      }

      //check if the next element is an input or textarea
      if(elem.next().nodeName === 'INPUT' || elem.next().nodeName === 'TEXTAREA') {
        //ensure the id of the input/textarea is the same as the for value in the label, else set it so
        if(elem.next().attr('id') === input) {
          return
        } else {
          elem.next().attr('id', input)
        }
      }
    }
  };

});

app.directive（'placeHolder'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“{label}}”，
范围：{
标签：“@”，
输入：'@'
},
链接：函数（$scope、elem、attrs）{
//检查父元素是否为div，然后将类设置为使其位置相对
if（elem.parent（）.nodeName==='DIV'）{
elem.parent（）.addClass（'placeholder-parent'）；
}
//检查下一个元素是输入区还是文本区
if（elem.next（）.nodeName=='INPUT'| | elem.next（）.nodeName=='TEXTAREA'）{
//确保输入/文本区域的id与标签中的for值相同，否则将其设置为相同
if（elem.next（）.attr（'id'）==输入）{
返回
}否则{
elem.next（）.attr（'id'，输入）
}
}
}
};
});

要使用此命令，请将指令html修改为：

<place-holder label="labelText" input="inputId">

请参阅“隔离指令范围”一章

---

在AngularJS指令文档中：

谢谢！这正是我所需要的！我在指令中读到了$scope，但并没有读到那么远！工作起来很有魅力！