Isolate area attributes defined with @ are undefined / fade in directory link function

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',

        //require: 'ngModel',
        scope: {
            //ngModel: '@',
            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"

+5
source share
1 answer

$observe , (, src="{{bar}}"). , , , , undefined. -

, , .

, $ ( $watch , "@" ), , , , - , . , textForIcon , - DOM, .

, , :

  • '=' '@'. {{}} s HTML.
  • , :
    <rl-icon-widget icon-class="vladClass" ...>
    attrs.iconClass - '@'.
+10

All Articles