SKYnine SKYnine - 6 months ago 29
AngularJS Question

Angularjs - Pass argument to directive

Im wondering if there is a way to pass an argument to a directive?

What I want to do is append a directive from the controller like this:

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');


Is it possible to pass an argument at the same time so the content of my directive template could be linked to one scope or another?

here is the directive:

app.directive("directive_name", function(){
return {
restrict:'E',
transclude:true,
template:'<div class="title"><h2>{{title}}</h3></div>',
replace:true
};
})


What if I want to use the same directive but with $scope.title2?

Answer

Here is how I solved my problem:

Directive

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

Controller

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

I now can use different scopes through the same directive and append them dynamically.

Comments