Przekazywanie zmiennych z bieżącego zakresu do skompilowanej dyrektywy

Question

Próbuję przekazać zmienną z bieżącego zakresu do dyrektywy dodanej przez usługę $ compile.

Mogę przekazać ciąg do dyrektywy potomnej, ale nie do faktycznego obiektu.

Oto skrzypce ze scenariuszem: 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); 
      }); 
     } 
    }; 
}); 

jakieś przemyślenia?

Dzięki.

Answer 1

Fir wszystkim trzeba zastosować zakres po kompilacji i dołączyć, ponieważ jesteś manipulowanie DOM zewnątrz pętli skrótu:

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

Następnie ponieważ używasz alert='count' wtedy trzeba zmienić konfigurację zakresu w alert dyrektywy:

scope: { 
    a: '=alert' 
}, 

w przeciwnym razie, jeśli używasz a: '@alert' trzeba interpolować go w atrybucie tak: alert='{{count}}'

Wreszcie, ponieważ jest dwukierunkowa wiązania danych, można przypisać jeden intermidiate własność prymitywny użyć jako wskaźnik przycisku:

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); 
      }); 
     } 
    }; 
}); 

Demo:http://jsfiddle.net/ewx2trvx/3/

Answer 2

Musisz interpolować wartość, aby ją przekazać inaczej kątowy zakłada, że ​​chcesz mieć ciąg znaków.

Zmień swój $compile("<alert alert='count'></alert>")(scope) na $compile("<alert alert='{{count}}'></alert>")(scope), a następnie przekonwertuj otrzymany ciąg na numer: var count = +scope.a;.

Dodatkowo wewnątrz szablonu zmień {{count}} na {{a}}, ponieważ masz tutaj wyizolowany zakres.

Należy pamiętać, że w kanale 1.2 nie ma żadnego wiązania jednorazowego. Jeśli używasz 1.3, możesz jednorazowo połączyć się z {{::count}}.