Javascript 在AngularJs中将局部变量传递给指令

我有一个控制器，为中继器提供阵列：

demo.controller('MyCntl', function ($scope, $compile) {

    $scope.items = [
        { name: 'Diego' },
        { name: 'Darko' }
    ];       

    $scope.load = function (obj) {            
        $('body').append($compile("<panel data='obj'  />")($scope));
    }

});

<div ng-controller='MyCntl'>    
    <p ng-repeat='item in items'>
        <button ng-click='load(item)'>Load {{item.name}}</button>
    </p>       
</div>

demo.controller（'MyCntl'，函数（$scope，$compile）{
$scope.items=[
{name:'Diego'}，
{name:'Darko'}
];       
$scope.load=函数（obj）{
$（'body'）。追加（$compile（“”（$scope））；
}
});

加载{{item.name}

如您所见，重复项有一个按钮用于加载更多数据。单击按钮时，它将调用加载（obj）函数，该函数将向页面附加一个指令：

demo.directive('panel', function () {
    return {
        restrict: 'E',
        scope: {
            data: '@'
        },
        template: '<pre>I\'m a panel called by {{data.name}}</pre>',
        controller: function ($scope, $element, $attrs) {

        }            
    }
});

demo.directive（'panel'，function（）{
返回{
限制：'E'，
范围：{
数据：“@”
},
模板：“我是一个由{{data.name}}调用的面板，
    controller: function ($scope, $element, $attrs) {
        $scope.data = $scope.$eval($attrs.data);     
    }

var newScope = $scope.$new();  
newScope.obj = obj;  
$('body').append($compile("<panel data='obj'  />")(newScope));  

控制器：函数（$scope、$element、$attrs）{
}            
}
});

问题是我无法理解如何将局部变量obj传递给指令。我知道我可以将变量设置为控制器的$scope，并从指令中轻松读取它，但这有点失败

---

Fiddle：

您可以将变量作为元素的属性传递，但它应该是当前范围的属性，所以， 我对你的代码做了一些修改

  $scope.load = function (obj) {
        var index=$scope.items.indexOf(obj);
        $('body').append($compile("<panel data='items["+ index +  "]'/>")($scope));
    }

---

这是我的，看看你在找什么？

你可以把变量作为元素的属性传递，但它应该是你当前作用域的属性，所以， 我对你的代码做了一些修改

  $scope.load = function (obj) {
        var index=$scope.items.indexOf(obj);
        $('body').append($compile("<panel data='items["+ index +  "]'/>")($scope));
    }

---

这是我的，看看你在找什么？

我把你的小提琴修好了。看这里

问题是您无法将参数传递给未绑定到范围的指令。在您的情况下，

obj

。我还将scope属性更改为使用

=

因此，范围加载方法更改为

$scope.panels = [];
$scope.load = function (obj) {
    $scope.panels.push(obj);
};

$scope.load=函数（obj）{
var索引=$scope.items.indexOf（obj）；
$（'body'）。追加（$compile（“”（$scope））；
}

我把你的小提琴修好了。看这里

问题是您无法将参数传递给未绑定到范围的指令。在您的情况下，

obj

。我还将scope属性更改为使用

=

因此，范围加载方法更改为

$scope.panels = [];
$scope.load = function (obj) {
    $scope.panels.push(obj);
};

$scope.load=函数（obj）{
var索引=$scope.items.indexOf（obj）；
$（'body'）。追加（$compile（“”（$scope））；
}

在控制器中使用DOM操作并不理想，因此我建议使用其他方法来实现这一点

我会保留一个收集面板作为

<panel data="{{panel.name}}" ng-repeat="panel in panels track by $index"  />

并直接以HTML格式呈现：

demo.directive('panel', function () {
   return {
      restrict: 'E',
      scope: {
        data: '@'
      },
      template: '<pre>I\'m a panel called by {{data}}</pre>'        
  }
});

最后，稍微更改指令：

scope: {  
    data: '='  
},  

demo.directive（'panel'，function（）{
返回{
限制：'E'，
范围：{
数据：“@”
},
模板：“我是一个由{{data}}调用的面板”
    controller: function ($scope, $element, $attrs) {
        $scope.data = $scope.$eval($attrs.data);     
    }

var newScope = $scope.$new();  
newScope.obj = obj;  
$('body').append($compile("<panel data='obj'  />")(newScope));  

}
});

---

演示：

在控制器中使用DOM操作并不理想，因此我建议使用其他方法来实现这一点

我会保留一个收集面板作为

<panel data="{{panel.name}}" ng-repeat="panel in panels track by $index"  />

并直接以HTML格式呈现：

demo.directive('panel', function () {
   return {
      restrict: 'E',
      scope: {
        data: '@'
      },
      template: '<pre>I\'m a panel called by {{data}}</pre>'        
  }
});

最后，稍微更改指令：

scope: {  
    data: '='  
},  

demo.directive（'panel'，function（）{
返回{
限制：'E'，
范围：{
数据：“@”
},
模板：“我是一个由{{data}}调用的面板”
    controller: function ($scope, $element, $attrs) {
        $scope.data = $scope.$eval($attrs.data);     
    }

var newScope = $scope.$new();  
newScope.obj = obj;  
$('body').append($compile("<panel data='obj'  />")(newScope));  

}
});

---

演示：

也许您可以创建新的作用域来放入局部变量。
在您的情况下，您必须进行两项更改：

1） 如果在指令中使用“@”，则只能传递字符串，如果要传递对象，请使用“=”

2） 在控制器中创建新的作用域

var newScope=$scope.$new（）；
newScope.obj=obj；
$（'body'）。追加（$compile（“”）（newScope））；

也许您可以创建新的作用域来放入局部变量。
在您的情况下，您必须进行两项更改：

1） 如果在指令中使用“@”，则只能传递字符串，如果要传递对象，请使用“=”

2） 在控制器中创建新的作用域

var newScope=$scope.$new（）；
newScope.obj=obj；
$（'body'）。追加（$compile（“”）（newScope））；

嗨，谢谢你的回答和提琴。是的，它可以工作，但它不传递局部变量。如果我找不到其他方法，我会使用你的代码。嗨，谢谢你的回答和提琴。是的，它可以工作，但它不传递局部变量。如果我找不到其他方法，我会使用你的代码。谢谢！现在我明白了问题所在。还可以将“=”指向范围。谢谢！现在我明白了问题所在。也很好地将“=”指向作用域。是的，我对控制器中的DOM操作一点也不满意，但我不太确定我是否愿意将所有模式弹出窗口都放在index.html中。我正在开发一个CMS，所以我有很多模板和指令，我更喜欢通过ajax加载模板，因为这样我可以在文件系统中组织它们，而不是将它们都放在一个唯一的文件中，这样会很容易地增长。也许一个解决方案是使用服务器端包含。如果我理解正确，那么在这种情况下，您应该使用

templateUrl

而不是

template

异步加载标记。确切地说，我已经使用了它，但为了简单起见，我使用了内联html作为示例。是的，我对控制器中的DOM操作一点也不满意，但我不太确定我是否愿意将所有模式弹出窗口都放在index.html中。我正在开发一个CMS，所以我有很多模板和指令，我更喜欢通过ajax加载模板，因为这样我可以在文件系统中组织它们，而不是将它们都放在一个唯一的文件中，这样会很容易地增长。也许一个解决方案是使用服务器端包含。如果我理解正确，那么在这种情况下，您应该使用

templateUrl

而不是

template

异步加载标记。确切地说，我已经使用了它，但为了简单起见，我使用了