如何在angularjs中将多个作用域变量传递到自定义指令中

how to pass multiple scope variables into custom directive in angularjs

本文关键字：变量 指令 自定义 作用域 angularjs      更新时间：2023-09-26

我试图将2个作用域变量从控制器传递到一个自定义指令中，但在访问这两个变量时都遇到了问题。指令和控制器的型号相同。这是代码：

Html:

<myDirective data="var1" item="var2"></myDirective>

控制器：

$scope.var1="abc";
$scope.var2="xyz";

指令：

  app.directive('myDirective', function () {
        return {
            restrict: 'E', //E = element, A = attribute, C = class, M = comment         
            scope: {
                    var1: '='
                     var2:'='
                     },
            templateUrl: 'myTemplate.html',
            link: function ($scope, element, attrs) {

                    } 
        }
    });

模板Url:myTemplate.html

 <div>{{var1}}</div>  // This works
 <div>{{var2}}</div>  // This doesn't works

知道我怎么能两者都用吗？

在代码中进行这些更改

<popover data="var1" item="var2"></popover>

JS-

app.directive('popover', function () {
    return {
        restrict: 'E', //E = element, A = attribute, C = class, M = comment
        scope: {
            data: '=',
            item: '='
        },
        templateUrl: 'myTemplate.html',
        link: function (scope, element, attrs) {
           console.log(scope.data, scope.item);
        } 
     }
});

更改模板以匹配DDO中声明的名称。

<myDirective var1="var1" var2="var2"></myDirective>

避免使用data作为属性名称。这是一个保留前缀，在规范化过程中被剥离。有关属性非军事化的更多信息，请参阅AngularJS开发人员指南-指令非军事化。

相关文章：