我正在尝试将当前作用域中的变量传递给通过$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,attrs) {
element.bind("click",function () {
console.log(scope.a);
alert("This is alert #" + scope.a);
});
}
};
});
有什么想法吗？
谢谢.
解决方法
在编译和追加之后需要应用范围的所有内容,因为你在摘要循环之外使用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'
},
否则,如果你使用：’@alert’,你需要在属性中插入它,如下所示：alert ='{{count}}’
最后,由于是双向数据绑定,您可以再分配一个中间基本属性以用作按钮的索引：
myApp.directive("alert",function () {
return {
template: "<div><button class='btn btn-default'>Show alert # {{index}}</button></div>",scope: {
a: '=alert'
},attrs) {
scope.index = scope.a;
element.bind("click",function () {
alert("This is alert #" + scope.index);
});
}
};
});
