CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
99823
99823

Reputation: 2457

Confusion on Angular Attributes on Custom Directive

I'm confused as to why this isn't working...

here is my directive:

app.directive('dateDropDowns', function () {

function link($scope, elem, attr) {

    console.log($scope.startYear);
};

function controller($scope, $attrs, $location) {

};

return {
    link: link,
    scope: {
        startYear: "&",
        endYear: "&",
        date: "=",
        required: "&"
    },
    restrict: "EA",
    templateUrl: "/scripts/templates/datedropdowns.html",
    controller: controller
}
});

Here is my directive html:

 <div date-drop-downs start-year="startYear" end-year="endYear" required="true" date="testDate"></div>

startYear, endYear, testDate are all defined in the scope of the controller on which the above html exists.

The console.log in the link function is returning:

 function (locals) {
              return parentGet(scope, locals);
            }

However, the startYear should be returning 1910 as that is what is set to in the controller on which the "date-drop-downs" directive is being called.

I've tried console.log($scope.$eval($scope.startYear)); but it returns the same thing above

I've tried console.log($scope.$eval(attr.startYear)); but it returns the same thing above

I've tried console.log(attr.startYear); but that just returns the text "startYear"

I'm not sure what to do to actually get the startYear value.

Any help is greatly appreciated.

Upvotes: 0

Views: 54

Answers (1)

PSL
PSL

Reputation: 123739

Since you are using & binding they get wrapped in as function if they are already not function. This is generally used to invoke a method on the parent using isolate scope.

So you should actually do:-

$scope.startYear()

to get the value of startYear, if you are looking for 2 waybinding you should go with = only, if you just need it as text binding then use @ and set the value as start-year="{{startYear}}" on the directive

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

Inorder to achieve one-time binding you could use bindonce or with angular 1.3beta you could use one-time binding syntax:-

 .. start-year="{{::startYear}}" ...

and 

 startYear: "@",

Plnkr

Upvotes: 1

Related Questions