Angularjs 1.5 replace directive element html

Question

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!

CraigR8806 · Accepted Answer · 2016-12-12 13:35:11Z

2

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.

edited Dec 12, 2016 at 13:35

answered Dec 12, 2016 at 13:17

CraigR8806

1,58213 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

thomas Over a year ago

Thanks Craig, I forgot to mention that the "what" part is only to check if the concept works. I do this to swap the whole button for something else if the condition is met. Since I need to replace the whole thing I can't find a way to make it work with ng-hide/show. I'll clarify in my question.

CraigR8806 Over a year ago

Are you just going to be toggling between two different types of elements with different content? like an a tag and a div tag?

thomas Over a year ago

The idea is to swap the button with several buttons (ie the submenu) when active. So I need to toggle between a and a lists of as (not containg the original) when $state changes

thomas Over a year ago

Thanks! This should work. For some reason I thought I need to replace the code since a "wrapper" for ng-hide/show would wreck the layout but I was wrong. Thanks for your help!

Collectives™ on Stack Overflow

Angularjs 1.5 replace directive element html

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related