How to link ng-models inside directive?

Question

LINK TO see visualisation oа my question LINK

I'm totally lost. Have read lots of SO replies (closest problem was here)

html:

<div  title="Employment start date"
                        ng-model="tabsData.employment_start_date" 
                        input-date="{{dateFormats.getCurFormat()}}"></div>

I need to show & edit (by custom directive) Date value;
How to bind (bidirectionally) my OUTER ng-model (tabsData.employment_start_date) with INNER ng-model (???) on <datepicker> ?

(see below <---------- HERE !!! sign tagretting to the <datepicker>'s ng-model attr in the snippet where I need to past Bidirectionally binding)

having some kind of directive:

directive('inputDate', function factory(dateFilter) {
    return {
                require:'^ngModel',
                restrict:'A',
                replace: true,

    template:'<div class="control-group">
        <div class="controls">
            <label>{{title}}</label>
            <input class="dateInputValue"
                    ng-model="formattedDate"
                    readonly
                    ng-click="showPicker=!showPicker"/>
            <div class="datePickerBlock">
                <button class="datePickerBtn"
                        ng-click="showPicker=!showPicker">
                    <i class="whhg icon-calendar"></i>
                </button>
                <datepicker
                        class="datePicker"
                        show-hide="{{showPicker}}"

                        ng-model=" ??? "  <--------------------- HERE !!!!

                        show-weeks="true"
                        starting-day="1"
                        date-disabled="disabled(date, mode)">
                </datepicker>
            </div>
        </div>
    </div>',

                link:function (scope, elm, attrs, ngModelCtrl) {

                    ngModelCtrl.$formatters.unshift(function (modelValue) {
                        scope.formattedDate = dateFilter(modelValue, attrs.inputDate || 'medium');
                        return scope.formattedDate;
                    });

                    ngModelCtrl.$parsers.unshift(function(viewValue) {
                        var date = new Date(viewValue);
                        return isNaN(date) ? '' : date;
                    });
                }
    };
});

In addition my 2nd question, why when I replace template to templateUrl property:
templateUrl: '/cached/ui-elements/inputBool.html' referencing to:

/* Template */
angular.module("/cached/ui-elements/inputDate.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("/cached/ui-elements/inputDate.html",
       "<div class=\"controls\">\n"+
          "<input class=\"dateInputValue\" " +
                  "ng-model=\"ngModelLocal\" " +
                  "readonly " +
                  "ng-click=\"showPicker=!showPicker\"/>\n"+
           <MY-DATEPICKER ng-model="ngModelLocal"></MY-DATEPICKER>
       "</div>"
}]);

attrs.dateFormat equals to {{dateFormats.getCurFormat()}} STRING! (without returning an actual expression execution result on the $scope as before with template property)

Guys help ;)

frosty frosty · Accepted Answer · 2013-07-11T14:49:56

They way that you can do this is by using what is called "Isolate Scope" inside of your directive. If you need to understand a bit about, Egghead.io has several videos explaining the different ways to bind variables using the isolate scope.

I have done something like what you are asking for. It looks something like this:

<div ng-controller="MyCtrl">
    --some additional html--
    <div my-directive="blah" foo="scopevar1name" bar="scopevar2name"></div>
    --some additional html--
</div

With "foo" and "bar" I pass in the name of the variables on my "MyCtrl" that I want to share with the bloody directive. Then inside the directive I have to do the following:

.directive('inputDate', function factory(dateFilter) {
    return {
            require:'^ngModel',
            restrict:'A',
            replace: true,
            scope:{
                "MYFOO" : "=foo",
                "MYBAR" : "=bar"
            },
            template: "your html here",

            link:function (scope, elm, attrs) {
                IN HERE YOU CAN USE "scope.MYFOO" and "scope.MYBAR"
            }
    };
});

"scope.MYFOO" inside the directive is a reference to "MyCtrl.$scope.foo". Any changes you make in one will be reflected in the other.

Downfall, if "foo" is a non-mutable object (like a string or number or boolean or date) then this will not work. You will need to nest those primitives inside of the an actual object that can be mutated, and then bind to the object and reference it's children inside the directive. If you need to understand that more, let me know.

How to link ng-models inside directive?

1 Answers