Search code examples
angularjsangularjs-scope

Directive scope issue inside ng-repeat


Even after a week of deep trial i wasn't able to solve the following issue.

1) Html of Container Got an Html container with a ng-repeat using inside a E directive, here's a simplified example.

<div ng-repeat="block in blocks">
   <my-directive
    selected="selected[block.name]"
    block-name="block.name"
   >
   </my-directive>
</div>

2) Code of the Directive

module.directive('myDirective', myDirective);

function myDirective() {
    return {
        restrict: 'E',
        templateUrl : 'myDirectiveTemplate.tpl.html',
        scope: {
            selected: '='
            blockName: '='
        },
        link: function ($scope) {
        }
    }
};

3) The Html of the Directive Used

<div>
 <div>
  <input type="text" ng-model="selected.denomination" myFunc="onCompletedListClick($parent.selected, $parent.blockName)"
   class="form-control"/>
 </div>
</div>
<button
ng-click="onCompletedListClick($parent.selected, $parent.blockName)">
                    ReSearch</button>

The issue is on the directive, when using the button the scope is always with the correct data, the myFunc is called in this case when pressing the Enter Key.

I have in some case let's say four Blocks, when doing the research for the first one is ok, but doing the research for the second one it's using the scope of the first... but only when hitting key, the research starting from button seems to be always ok.

My questions are: 1) How to fix this, i'm getting crazy over it 2) Why it's happening?


Solution

  • Found the issue.

    The real issue was the missing Type of the Button, the fields printed inside the form had the "default" behaviour of submitting on Enter Key pressed. The default of button without type is "submit", so it was trying to submit the form, and the first button without type was launched, i fixed the button and put a ng-keydown function on my directive the correctly handle the Enter Key submit.