0

姓と名の両方をホストできる「name」ディレクティブを作成しようとしています。

私が現在持っているコードは次のとおりです。

index.html

<div data-dm-name label="First Name:" info="first_name"></div>
<div data-dm-name label="Last Name:" info="last_name"></div>

指令：

angular
    .module('app.names.directive',[])
    .directive('dmName', [ directive ])

function directive() {
    return {
        restrict: 'E',
        scope: {
            label: '=',
            info: '='
        },
        templateUrl: '/assets/components/name_template.html'
    };
}

name_template.html

<div class="wizard-form-group">
    <div class="input-group">
        <label class="wizard-form-label" for="info">
            {{ label }}
        </label>
        <span class="input-field"
              data-ng-class="{
                  error: form.info.$dirty &&
                         form.info.$invalid,
                  focused: form.info.$focused
              }"
            >
            <input
                type="text"
                name="info"
                id="info"
                data-ng-model="info"
                data-ng-required="true"
                data-ng-focus="form.info.$focused = true"
                data-ng-blur="form.info.$focused = false"
            />
        </span>
    </div>
</div>

私の問題は、テンプレート ファイルに label と info の値を渡すことができないように見えることです。私は何を間違っていますか？

私はAngularを使い始めたばかりなので、これが簡単な解決策になることを願っています.

前もって感謝します

4

2 に答える 2

0

ディレクティブは要素に制限されていますが、属性として使用しています。したがって、あなたの指示は要素に作用していません。

DDO を次のように変更する必要があります。

function directive() {
  return {
    restrict: 'A', // attribute allowed
    scope: {
        label: '=',
        info: '='
    },
    templateUrl: '/assets/components/name_template.html'
  };
}
于 2016-04-20T06:02:14.407 に答える