angularjs - Angular directive two way databinding fails -
i have dropdown directive function sets active item in dropdown:
angular.module('clientapp') .directive('customdropdown', function ($filter, calculationsfactory) { return { templateurl: 'template/custom-drop-down/custom-drop-down.html', restrict: 'e', scope: { resources: '=', activeresource: '=', }, link: function postlink(scope) { scope.setactiveresource = function(resource){ scope.activeresource = resource; }; } }; });
markup:
<custom-drop-down resources="medias" active-resource="activemedia"></custom-drop-down>
directivetemplate:
<div class="btn-group" dropdown> <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width:100%;" ng-click="$event.stoppropagation()"> {{activeresource.title}} <span class="caret pull-right" style="margin-top:8px;"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="resource in filtredresources" ng-click="setactiveresource(resource)" ng-class="{active: resource === activeresource}"> <a href>{{resource.title}}</a> </li> </ul> </div>
problem function don't 2 way bind "activemedia" in case. not updated.
i tried replicate case in jsfiddle there works. have missed?
update
i have identified issue. directive placed within accordion directive ui-bootstrap:
<accordion> <accordion-group heading="resources" is-open="true"> <custom-drop-down resources="medias" active-resource="activemedia"></custom-drop-down> </accordion-group> </accordion>
if move directive outside accordion directive, works. somehow accordion directive interfering directive. possible solve without modifying code ui-bootstrap?
in case scoping issue, discussed here.
for elements inside angular-bootstrap controls need use $parent.
prefix on scope variables.
<accordion> <accordion-group heading="resources" is-open="true"> <custom-drop-down resources="$parent.medias" active-resource="$parent.activemedia"></custom-drop-down> </accordion-group> </accordion>
Comments
Post a Comment