Angular directive not rendering correctly

Question

I have an angular directive that isn't quite rendering correctly.

here's the html:

<cloud-login ng-repeat='c in ctrl.clouds' cloud="{{c}}"></cloud-login>

and the directive:

function CloudLoginDirective() {
  return {
  restrict: 'AE',
  template: '<a ng-click="ctrl.cloudLogin("{{cloud}}")"><img ng-src="../images/{{cloud}}.png"/></a>',
  link: function(scope, element, attrs) {
    attrs.$observe('cloud', function(cloud) {
      scope.cloud = cloud;
    });
  }
 };
}

In my template, only the ng-src correctly populates with the appropriate text.

The ng-click does not.

Any hints?

Best.

ng-click="expression" ng-src="string"

Nicol
– Nicol

2015-05-20 02:48:54 +00:00
Commented May 20, 2015 at 2:48 — Nicol
– Nicol, Commented May 20, 2015 at 2:48

PSL · Accepted Answer · 2015-05-20 02:50:26Z

Your issue is due to the invalid expression caused by the ng-click expression: <a ng-click="ctrl.cloudLogin("{{cloud}}")"> This results in syntax error due to all those mismatching or pre-maturely terminating quotes. ng-click takes an expression you don't have to interpolate it. Just do:

<a ng-click="ctrl.cloudLogin(cloud)">

Plnkr

You could also make your directive much simpler removing all those attribute watches and using isolated scope and function binding and decoupling cloud directive from its parent controller, like this:

.directive('cloudLogin', function CloudLoginDirective() {
  return {
  restrict: 'AE',
  scope:{
    cloud:"=", // Using a 2 way binding, if you need only text then just use @ combined with {{c}} when used
    onClick:"&" //Function binding
  },
  template: '<a ng-click="onClick({cloud: cloud})"><img ng-src="../images/{{cloud}}.png"/>{{cloud}}</a>'
 };
});

and

<cloud-login ng-repeat='c in ctrl.clouds' 
             cloud="c" 
             on-click="ctrl.cloudLogin(cloud)"></cloud-login>

Plnkr

Collectives™ on Stack Overflow

Angular directive not rendering correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related