link see visualisation oа question link
i'm totally lost. have read lots of replies (closest problem here)
html:
<div title="employment start date" ng-model="tabsdata.employment_start_date" input-date="{{dateformats.getcurformat()}}"></div> i need show & edit (by custom directive) date value;
how bind (bidirectionally) outer ng-model (tabsdata.employment_start_date) inner ng-model (???) on <datepicker> ?
(see below <---------- here !!! sign tagretting <datepicker>'s ng-model attr in snippet need past bidirectionally binding)
having 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 2nd question, why when replace template 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 {{dateformats.getcurformat()}} string! (without returning actual expression execution result on $scope before template property)
guys ;)
they way can using called "isolate scope" inside of directive. if need understand bit about, egghead.io has several videos explaining different ways bind variables using isolate scope.
i have done asking for. looks this:
<div ng-controller="myctrl"> --some additional html-- <div my-directive="blah" foo="scopevar1name" bar="scopevar2name"></div> --some additional html-- </div with "foo" , "bar" pass in name of variables on "myctrl" want share bloody directive. inside directive have 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 can use "scope.myfoo" , "scope.mybar" } }; }); "scope.myfoo" inside directive reference "myctrl.$scope.foo". changes make in 1 reflected in other.
downfall, if "foo" non-mutable object (like string or number or boolean or date) not work. need nest primitives inside of actual object can mutated, , bind object , reference it's children inside directive. if need understand more, let me know.
Comments
Post a Comment