Question

我试图将当前作用域中的变量传递给通过$ compile服务添加的指令。

我可以将字符串传递给child指令，但不能传递给实际的对象。

以下是该方案的小提琴：http://jsfiddle.net/ewx2trvx/2/

HTML：

<section ng-app="myApp" ng-controller="MainCtrl">
    <addbuttonsbutton></addbuttonsbutton>
    <div id="space-for-buttons"></div>
</section>

JS：

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.count = 0;
}

myApp.directive("addbuttonsbutton", function () {
    return {
        restrict: "E",
        template: "<button addbuttons>Click to add buttons</button>"
    }
});

//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function ($compile) {
    return function (scope, element, attrs) {
        element.bind("click", function () {
            scope.count++;
            angular.element(document.getElementById('space-for-buttons'))
                .append($compile("<alert alert='count'></alert>")(scope));
        });
    };
});

//Directive for showing an alert on click
myApp.directive("alert", function () {
    return {
        template: "<div><button class='btn btn-default'>Show alert # {{count}}</button></div>",
        scope: {
            a: '@alert'
        },
        replace:true,        
        link: function (scope, element, attrs) {
            element.bind("click", function () {
                console.log(scope.a);
                alert("This is alert #" + scope.a);
            });
        }
    };
});

有什么想法？

感谢。

Answer 1

在编译和追加之后需要应用范围的所有内容，因为你在摘要循环之外使用DOM进行操作：

element.bind("click", function () {
    scope.count++;
    angular.element(document.getElementById('space-for-buttons'))
        .append($compile("<alert alert='count'></alert>")(scope));
    scope.$apply();
});

然后，因为您正在使用alert='count'，所以您需要在alert指令中更改范围配置：

scope: {
    a: '=alert'
},

否则，如果您使用a: '@alert'，则需要在属性中插入它，如下所示：alert='{{count}}'

最后，由于是双向数据绑定，您可以再分配一个中间基本属性以用作按钮的索引：

myApp.directive("alert", function () {
    return {
        template: "<div><button class='btn btn-default'>Show alert # {{index}}</button></div>",
        scope: {
            a: '=alert'
        },
        replace:true,        
        link: function (scope, element, attrs) {
            scope.index = scope.a;
            element.bind("click", function () {
                alert("This is alert #" + scope.index);
            });
        }
    };
});

演示： http://jsfiddle.net/ewx2trvx/3/

Answer 2

你需要插值来传递它，否则angular假定你想在那里有一个字符串。

将您的$compile("<alert alert='count'></alert>")(scope)更改为$compile("<alert alert='{{count}}'></alert>")(scope)，然后将收到的字符串转换为数字：var count = +scope.a;。

此外，在您的模板中，将{{count}}更改为{{a}}，因为此处有一个独立的范围。

请注意，在角度1.2中，没有一次性绑定。如果您使用1.3，则可以使用{{::count}}一次性绑定。

将变量从当前作用域传递给已编译的指令

2 个答案: