Javascript 将属性作为$scope变量以角度传递

我有一个指令，我正在尝试获取attr并将它们传递给$scope，但我不太确定如何做到这一点。更具体地说，我试图将模板中的属性设置为日期选择器标记中设置的名称。我尝试将它们设置为变量，但显然不起作用。 非常感谢您的帮助和进一步澄清。谢谢

HTML

JS

App.directive（'datePicker'，function（）{
返回{
范围：{
姓名：'@'
},
限制：“AE”，
替换为：“true”，
模板：“”，
控制器：['$scope'，函数（$scope）{
$scope.this_name=此_name；
}],
链接：函数（范围、元素、属性）{
var this_name=attrs.name；
}
}
});

因为您是如何定义指令范围的：

  scope: {
      name : '@'
  }

名称已经是范围中的变量。如果在controller\link函数中没有对其进行任何特殊处理，则可以完全删除它们，并在模板中使用{{name}引用它。请注意，如果您使用“@”创建范围绑定，那么在html中，您应该以角度表达式的形式传递数据，这意味着：

name="{{date_end}}"

---

正如我从您的代码片段中看到的，您希望使用

name

属性作为ng model into指令。我认为，您应该考虑使用另一种类型的隔离作用域（）

以下是我的方法（）：

app.directive（'datePicker'，function（）{
返回{
范围：{
名称：'=名称'
},
限制：“AE”，
替换为：“true”，
模板：
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
}
});

---

所以现在您可以从指令编辑父范围。但是，如果您不希望在作用域之间进行这种通信，请使用

@

作用域，如@haimlit。

您的代码片段存在一些问题： 首先，您没有将属性分配给

范围，而是分配给一个局部变量，因此它在控制器函数中不可用

你可以试试这个：

App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        controller: ['$scope', function($scope){
            $scope.this_name = this_name;
        }],
        link: function(scope, element, attrs){
            scope.this_name = attrs.name;
        }
    }
});

但是您已经在隔离作用域中定义了
name
，因此它应该可以在conroller或link函数中作为
scope.name
使用：

App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        controller: ['$scope', '$attrs', function($scope, $attrs){
            $scope.this_name = $attrs.name;
        }]
    }
});

App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        link: function(scope, element, attrs){
            console.log(scope.name); // this is your name defined as attribute name="..." on the tag
        }
    }
});

App.directive（'datePicker'，function（）{
返回{
范围：{
姓名：'@'
},
限制：“AE”，
替换为：“true”，
模板：“”，
链接：函数（范围、元素、属性）{
console.log（scope.name）；//这是在标记上定义为attribute name=“…”的名称
}
}
});
更一般地说，您还可以将$element和$attrs与$scope一起注入控制器，但这里不需要这样做。我想我没有指定。我希望使用名称attr来设置模板中属性=“{this_name}}”的值。然后您可以将其更改为作用域：{this_name:'@name'}，甚至可以从指令中删除链接和控制器。
App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        controller: ['$scope', function($scope){
            $scope.this_name = this_name;
        }],
        link: function(scope, element, attrs){
            scope.this_name = attrs.name;
        }
    }
});

App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        controller: ['$scope', '$attrs', function($scope, $attrs){
            $scope.this_name = $attrs.name;
        }]
    }
});

App.directive('datePicker', function(){
    return {
        scope: {
            name : '@'
        },
        restrict: 'AE',
        replace: 'true',
        template: '<div class="date"><div class="input-group"><input type="text" class="form-control" id="{{this_name}}" name="{{this_name}}" ng-model="event.{{this_name}}" required/><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>',
        link: function(scope, element, attrs){
            console.log(scope.name); // this is your name defined as attribute name="..." on the tag
        }
    }
});