7

select に対してラッパー ディレクティブを作成しようとしていて、select に「name」属性を割り当てようとしています

指令

    <form name=myform>
          <selectformfield label="Select Orders" id="id_1" name="orderselection"
            selectedval="obj.order" options="Orders" />
    </form>

ディレクティブを次のように定義しています

mainApp
    .directive(
            'selectformfield',
            function() {
                return {
                    restrict : 'E',
                    transclude : true,
                    scope : {
                        label : '@',
                        id : '@',
                        selectedval : '=',
                        options : '=',
                        name: '='
                    },
                      template : "<select class='form-control'     ng-model='selectedval' name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>"

                };
            });

console.log($scope.myForm.orderselection) のようなコントローラーの myform を介して select の name 属性にアクセスしようとしていますが、未定義になります

ディレクティブで名前をハードコーディングすると、属性 console.log($scope.myForm.orderselection) にアクセスできます

ここで何かが欠けています。ポストコンパイルなどを行う必要がありますか?

4

2 に答える 2

0

$scope で DOM に直接アクセスすることは悪い習慣であり、絶対に避けるべきです。angular のような MVC 構造では、DOM (ビュー) にアクセスしてその状態とデータを取得する代わりに、モデル ($scope) にアクセスします。あなたの場合、ディレクティブの名前をorderselection親スコープのプロパティにバインドしています。また、フォームはFormControllerのインスタンスであることにも注意してください。name 属性を使用して、オプションでフォーム インスタンスをスコープに発行できます。あなたの場合、親スコープに新しいプロパティを作成します。

親スコープにいる場合は、次のように名前にアクセスしてみてください。

console.log( $scope.myform.orderselection );

または、ディレクティブのスコープ内にいる場合。

console.log( $scope.name);

スコープ ディレクティブnameプロパティは親スコープ プロパティにバインドされるため、親スコープorderselectionプロパティに値を割り当てる必要があります。そうしないと、値が未定義になります。このような：

$scope.myform.orderselection = "orderselection ";

ディレクティブ内で検証を行う必要がある場合は、既にname属性をorderselection. 次のようにできます。

template : "<select class='form-control' ng-attr-name='{{name}}'  ng-disabled='[name].$invalid' .../>
于 2013-10-19T03:40:13.183 に答える