angularjs 指令绑定名称属性到模板元素答案

【问题标题】：angularjs directive binding name attribute to template elementangularjs 指令绑定名称属性到模板元素
【发布时间】：2013-10-28 00:12:09
【问题描述】：

我正在尝试在 select 上创建一个包装器指令，并且我正在尝试将“name”属性分配给 select

指令

    <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>"

                };
            });

我正在尝试通过控制器中的 myform 访问 select 的 name 属性，例如 console.log($scope.myForm.orderselection) 并且我得到未定义

如果我在指令中硬编码名称，那么我可以访问属性 console.log($scope.myForm.orderselection)

我在这里缺少任何东西。我需要做任何后期编译吗？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

直接在 $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' .../>

【讨论】：

我实际上正在尝试做一些表单验证，我想为选择字段分配一个名称，以便我得到它的错误状态 ng-disabled="myForm.orderselection.$invalid"。
@sam：我不知道您需要进行验证。检查更新的答案

【解决方案2】：

Khanh TO 是正确的，因为您在尝试通过隔离范围访问时需要正确设置您的名称。这是我相信您正在努力完成的工作示例。我已将 cmets 添加到我已更改您所拥有的代码的代码中。

plunker

Javascript：

var app = angular.module('plunker', [])

.controller('MainCtrl', function ($scope, $log) {
    $scope.model = {
        person: {
            name: 'World'
        },
        people: [{
            name: 'Bob'
        }, {
            name: 'Harry'
        }, {
            name: 'World'
        }]
    };
})

.directive('selectformfield', function ($compile) {
    return {
        restrict: 'E',
        replace: true, // Probably want replace instead of transclude
        scope: {
            label: '@',
            id: '@',
            selectedval: '=',
            options: '=',
            name: '@' // Change name to read the literal value of the attr
        },
        // change name='{{ name }}' to be ng-attr-name='{{ name }}' to support interpolation
        template: "<select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>"
    };
});

HTML：

<body ng-controller="MainCtrl">
    <p>Hello {{ model.person.name}}!</p>
     <form name='myForm'>
          <label for='orderselection'>Say hello to: </label>
          <selectformfield label="Select Orders" id="id_1" name="orderselection"
            selectedval="model.person" options="model.people"></selectformfield>
       <p ng-class='{valid: myForm.$valid, invalid: myForm.$invalid }'>The form is valid: {{ myForm.$valid }}</p>
       <p ng-class='{valid: myForm.orderselection.$valid, invalid: myForm.orderselection.$invalid }'>The people select field is valid: {{ myForm.orderselection.$valid }}</p>
    </form>
  </body>

CSS：

.valid {
  color: green;
}

.invalid {
  color: red;
}

【讨论】：