Question

我试图通过为每个元素制作指令来缩短我的表单代码，但是我的指令没有显示我传递给它的所有内容并且模型没有被绑定。

HTML：

<formstring dataBinding="project.title" dataTitle="Title" dataPlaceholder="title" />

指令：

app.directive('formstring', function () {
  return {
    restrict: 'AEC',
    dataBinding: '=',
    dataTitle: '@dataTitle',
    dataPlaceholder: '@dataPlaceholder',
    dataHelp: '@dataHelp',
    templateUrl: '/app/js/directives/form/string.html',
  };
});

string.html：

<div class="form-group">  2   <label for="{{dataTitle}}" class="col-sm-2 control-label">{{dataTitle}}</label    >
  <div class="col-sm-10">
    <input type="text" class="form-control" id="{{dataTitle}}" placeholder="{{da    taPlaceholder}}" ng-model="dataBinding">
    <p ng-show="dataHelp" class="help-block">{{dataHelp}}</p>
  </div>
</div>

project是一个$ scope对象，它有一个属性'title'。

我错过了什么？为什么这会显示在空白输入中，没有填充任何属性，为什么绑定不起作用？

Answer 1

您需要更改创建隔离范围的方式：

app.directive('formstring', function () {
  return {
    restrict: 'AEC',
    scope: {
       dataBinding: '=',
       dataTitle: '@dataTitle',
       dataPlaceholder: '@dataPlaceholder',
       dataHelp: '@dataHelp'
    },
    templateUrl: '/app/js/directives/form/string.html',
  };
});

阅读the doc，了解隔离/隔离范围的含义，因为它会对整体范围产生影响。

编辑：我之前没有注意到这个额外的问题。当您使用指令时，您的驼峰案例范围属性将变为蛇形（请参阅Mobin的答案）：

<formstring data-binding="project.title" data-title="Title" data-placeholder="title" />

但是，在您的模板中，属性仍然像您一样：

<div class="form-group">  2   <label for="{{dataTitle}}" class="col-sm-2 control-label">{{dataTitle}}</label    >
  <div class="col-sm-10">
    <input type="text" class="form-control" id="{{dataTitle}}" placeholder="{{da    taPlaceholder}}" ng-model="dataBinding">
    <p ng-show="dataHelp" class="help-block">{{dataHelp}}</p>
  </div>
</div>

这是因为模板中的绑定是JSON属性，而使用指令属性时的属性是XML属性。

我会对您的模板进行一些小调整，例如id="{{dataTitle}}"可以轻松破解需要id属性唯一的HTML标准......您可能希望使用name="{{dataTitle}}"代替。 name仍然可能导致问题，但例如，它不会中断document.getElementById。

另外，我尽可能使用ng-bind：

<p ng-show="dataHelp" class="help-block" ng-bind="dataHelp"></p>

Answer 2

您还没有理解如何正确配置指令。我建议你阅读文档，它可能会帮助你更好地理解。

与此同时，您的HTML，指令代码和模板应该是这样的（还有一个working demonstration on Plunkr）：

HTML：

<formstring data-binding="project.title" 
            data-title="Title Demo" 
            data-placeholder="title placeholder"
            data-help="My help text">
</formstring>

指令：

app.directive('formstring', function () {
  return {
    restrict: 'E',
    scope: {
        binding: '=',
        title: '@',
        placeholder: '@',
        help: '@'
    },
    templateUrl: '/app/js/directives/form/string.html',
  };
});

模板（string.html）：

<div class="form-group">
   <label for="{{title}}" class="col-sm-2 control-label">
      {{title}}
    </label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="{{title}}" placeholder="{{placeholder}}" ng-model="binding">
      <p ng-show="help" class="help-block">{{help}}</p>
    </div>
</div>

Answer 3

应该是

<formstring data-binding="project.title" data-title="Title" data-placeholder="title" />

Angular指令属性不会被传递

3 个答案: