javascript angularjs 指令将名称属性绑定到模板元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19461710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs directive binding name attribute to template element
提问by sam
I am trying create a wrapper directive over select and I am trying to assign the 'name 'attribute to the select
我正在尝试通过选择创建一个包装器指令，并且我正在尝试将“名称”属性分配给选择
directive
指示
<form name=myform>
<selectformfield label="Select Orders" id="id_1" name="orderselection"
selectedval="obj.order" options="Orders" />
</form>
I have my directive defined as
我的指令定义为
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>"
};
});
I am trying to access the select's name attribute through myform in the controller something like console.log($scope.myForm.orderselection) and I get undefined
我正在尝试通过控制器中的 myform 访问选择的名称属性，例如 console.log($scope.myForm.orderselection) 并且我未定义
If I hardcode the name in the directive then I am able to access the attribute console.log($scope.myForm.orderselection)
如果我在指令中对名称进行硬编码，那么我就可以访问属性 console.log($scope.myForm.orderselection)
I am missing anything here. Do I have to do any post compile or something ?
我在这里缺少任何东西。我必须做任何后期编译吗？
采纳答案by mortalapeman
Khanh TO is correct in that you need to setup your name correctly when trying to access to through your isolated scope. Here is a working example of what I believe you are trying to accomplish. I've added comments to the code where I've changed what you had.
Khanh TO 是正确的，因为您需要在尝试通过隔离范围访问时正确设置您的名称。这是我相信您正在努力完成的工作示例。我已经在代码中添加了注释，其中我已经更改了您所拥有的内容。
Javascript:
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:
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:
CSS：
.valid {
color: green;
}
.invalid {
color: red;
}
回答by Khanh TO
Accessing the DOM directly in $scope is bad practice and should be avoided at all costs. In MVC structure like angular, instead of accessing the DOM (view) to get its state and data, access the models instead ($scope). In your case, you're binding the name of your directive to the orderselectionproperty of your parent scope. Also notice that a form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute. In your case, you create a new property on the parent scope.
直接在 $scope 中访问 DOM 是不好的做法，应该不惜一切代价避免。在像 angular 这样的 MVC 结构中，不是访问 DOM（视图）来获取其状态和数据，而是访问模型（$scope）。在您的情况下，您将指令的名称绑定到orderselection父作用域的属性。另请注意，表单是FormController 的一个实例。可以选择使用 name 属性将表单实例发布到范围中。在您的情况下，您在父作用域上创建了一个新属性。
You could try accessing the name like this if you're in your parent scope:
如果您在父范围内，则可以尝试像这样访问名称：
console.log( $scope.myform.orderselection );
Or if you're in your directive scope.
或者，如果您在指令范围内。
console.log( $scope.name);
Because your scope directive nameproperty binds to your parent scope orderselectionproperty, you need to assign a value to your parent scope property or it will be undefined. Like this:
因为您的范围指令name属性绑定到您的父范围orderselection属性，所以您需要为您的父范围属性分配一个值，否则它将是未定义的。像这样：
$scope.myform.orderselection = "orderselection ";
If you need to do validation inside your directive, since you already bind the nameattribute with the orderselection. You could do it like this:
如果您需要在指令中进行验证，因为您已经将name属性与orderselection. 你可以这样做：
template : "<select class='form-control' ng-attr-name='{{name}}' ng-disabled='[name].$invalid' .../>
