javascript - 将局部变量传递给 AngularJs 中的指令

Question

我有一个 Controller ，可以为中继器提供数组:

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>

正如您所看到的，重复的项目有一个按钮可以加载更多数据。单击按钮时，它会调用 load(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) {

        }            
    }
});

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

fiddle :http://jsfiddle.net/darkoromanov/cngd9/

Answer 1

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

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

scope: {  
    data: '='  
},  

2)在 Controller 中创建新范围

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