将变量从当前范围传递到编译指令答案

【问题标题】：Passing variables from the current scope to a compiled directive将变量从当前范围传递到编译指令
【发布时间】：2015-04-23 18:12:06
【问题描述】：

我正在尝试将一个变量从当前范围传递给通过 $compile 服务添加的指令。

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

这是一个场景：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);
            });
        }
    };
});

有什么想法吗？

谢谢。

【问题讨论】：

你想传递什么？
scope.count 变量。

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案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/

【讨论】：

它......现在非常有意义:)。谢谢。
scope.index = scope.a; 有点棘手。但是分配给原始值允许“破坏”双向引用，因此当scope.a 更改时，每个指令内部的索引都不会更改。
你说得完全正确，但这只是一个人为的例子，我适应了一些东西来展示。我最初的问题源于我使用“@alert”而不是“=alert”这一事实。谢谢

【解决方案2】：

您需要插入该值以传递它，否则 angular 会假设您希望在那里有一个字符串。

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

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

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

【讨论】：