Dynamically changing directive attributes in AngularJs

Question

Need a bit of help to get this to finished it off. But if someone has a better suggestion I am an open minded individual.

Basically I've written a directive to swap out templates based on directive attribute.

<div id="popup" class="popup my-directive" type="player" style="display: none;"></div>

Problem that I have is changing the type attribute such that it would trigger $digest and re-evaluate my directive.

$scope.selectTeam = function () {
    $scope.type = 'team';
    //$scope.$apply(function () {
    // bind directive
    $(".popup").attr("type", "team");
    // show popup div
    $(".popup").show();
    //});
};

The purpose of type attribute is to track which template will be bound to popup div.

app.directive('myDirective', function () {
    return {
        restrict: 'AEC', // Attribute, Element, Class
        transclude: true, // expose controller scope
        templateUrl: function(element, attr){
            var type = typeof attr.type !== 'undefined' ? attr.type : 'player';

            if(!type) return;

            return 'search-' + type + '-tpl.html';
        },
    }
});

For live example please have a look at my plunker.

I will now try something with $compile to build my popup with new type value in each select function but really don't fancy this approach.

update

OK, I have cracked it quicker than originally expected. Live plunker.

Changes I introduced to controller:

$scope.selectTeam = function () {
    $scope.type = 'team'; // trigers $digest
    $(".popup").replaceWith($compile(angular.element(document).find("my-directive").attr("type", "team"))($scope));
    $(".popup").show();
};

Changes I introduced to HTML:

<my-directive id="popup" class="popup" type="player" style="display: none;"></my-directive>

The only issue this present that I noticed is Cannot read property 'insertBefore' of null when I try to search. But I can live with this.

As I mentioned before if someone has a different idea/approach or noticed something funny in my code please do share.

I'll try do see what i can do. But in my opinion this is getting really too complicated. Most of the time custom directives are miss-used and can be simply resolved without directive. Can you provide a little more detail about what you're trying to do ? (Functionally, not technically). — Okazari
– Okazari, Commented Jul 16, 2015 at 12:18
Okey, looke further into your code, i can guess why you've got some complications. You're using some jQuery within angular controller. You should never do that. Could we have a little chat here chat.stackoverflow.com/rooms/83430/… ? — Okazari
– Okazari, Commented Jul 16, 2015 at 12:24
@Okazari certainly I agree with you to a certain point. I am trying to come with a pop-up mechanism for searching and selecting a value from a collection of something. Depending on what this something is the search and the values may differ. Thats why I went with a directive after I scrapped my $compile version - plnkr.co/edit/JKOYHMdaarUrl4R11dKm?p=preview. While I have used extremely simple examples in my plunkers in reality these search/select pop-ups will be more complicated. I hope this gives a bit of an insight. — iiminov
– iiminov, Commented Jul 16, 2015 at 12:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

After a talk i found out two solutions.

First you can do what you need using ng-include this way instead of creating a custom directive (see it working into this plunker) :

<div ng-show="showSelect" ng-include="'search-'+type+'-tpl.html'">

Secondly i pointed out that this could be a modal using $modal (using "templateUrl") from ui-boostrap.

I actually tend to prefer the second option as you can define a controller, template, css etc... for each modal which is a bit cleaner and readable.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 16, 2015 at 14:21

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

1 Comment

iiminov Over a year ago

Can't thank you enough for having a chat with me. I learned a lot from that.

Collectives™ on Stack Overflow

Dynamically changing directive attributes in AngularJs

update

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

update

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related