The scope is highlighted in the directive, and the attributes of the scope are passed using "@".
So the directive is called:
<div ng-init="classForIcon = 'vladClass'"></div>
<div ng-init="textForIcon = 'Icon\ text'"></div>
<div ng-init="routeForIcon = 'www.google.com'"></div>
<div ng-init="tooltipForIcon = 'my tooltip'"></div>
<div ng-init="imageForIcon = 'images/HOME_ICON1.png'"></div>
<rl-icon-widget icon-class="{{classForIcon}}" icon-text = "{{textForIcon}}" icon-tooltip="{{tooltipForIcon}}" icon-route="{{routeForIcon}}" icon-image="{{imageForIcon}}"></rl-icon-widget>
Here's how the directive is defined:
'use strict';
fcPortalApp.directive('rlIconWidget', ['localizationAssistant', function(localizationAssistant) {
var obj = {
restrict: 'E',
templateUrl: 'scripts/directives/rliconwidget/rliconwidget.html',
scope: {
iconClass: "@",
iconRoute: "@",
iconText: "@",
iconTooltip: "@",
iconImage: "@"
},
link: function(scope, element, attrs) {
console.log(scope);
console.log(scope.iconImage);
console.log(scope.iconTooltip);
console.log(scope.iconRoute);
}
};
console.log(obj);
return obj;
}]);
When I check the scope object (click on the output of console.log (scope_ in firebug), it looks like it correctly set the iconImage, iconTooltip and iconRoute properties.
However, console.log (scope.iconImage), console.log (scope.iconTooltip) and console.log (scope.iconRoute) print "undefined"
source
share