CODEWITHSUNDEEP
angularjsangularjs-directive
thomas
thomas

Reputation: 2308

Angularjs 1.5 replace directive element html

I want to built an ng-repeat with dynamic buttons that change according to $state.params so I wrapped them in a directive. 

link:function(scope,element,attrs) {
$rootScope.$watch('params.source',function() {
    var link = scope.link;
    var name = scope.name;
    var href = $state.href('home',{source:link});
    if($state.params.source.indexOf(scope.link) == -1) {
        var template = '<a href="'+href+'" class="btn 
            btn-default">'+name+'</a>';
    }
    else template = '<a href="'+href+'" class="btn 
        btn-default">'+name+' what!?</a>';
    el = $compile(template)(scope);
    element.replaceWith(el);                    
});
}

But after the the first change of params, element is forgotten and answers with Cannot read property 'replaceChild' of null

How can I replace element?

Edit: I need to swap the whole Element for sowmething else in final product, that's why I can't use ng-show or ng-if

Thanks!

Upvotes: 0

Views: 136

Answers (1)

CraigR8806
CraigR8806

Reputation: 1584

You may be better off using ng-hide or ng-show in your html. Maybe something like this:

<div ng-repeat="yourArray as item">
   <a href="{{item.href}}" class="btn 
    btn-default">{{item.name}} <section ng-show="conditionToShow">what!?</section></a>';

</div>

This is a bit cleaner of a solution and it keeps you from having to add a watch. Watches are expensive and you should avoid them if at all possible.

Edit:

<div ng-repeat="yourArray as item">
   <div class="singleBtn" ng-show="conditionToShow" >
       <a href="{{item.href}}" class="btn btn-default">{{item.name}}</a>
   </div>
   <div class="multiBtn" ng-hide="conditionToShow">
       <a //rest of multi btn code
   </div>

</div>

Because of the fact that Angular provides both ng-show and ng-hide directives this allows you to control the presentation of these elements based on just one conditional.(i.e. your state.params)

When it is true, it will show just one btn and when it's false it will show multiple buttons. If the logic needs to be reversed, just switch ng-show and ng-hide.

Hopefully I understood your need better this time.

Upvotes: 2

Related Questions