AngularJS access ngrepeat child scope variable in directive

Question

I have two controls displayed in each ng-repeat, one is a dropdown box to select an address type, and second is an input with a custom directive.

I want to access the selected value in the first control (set in variable aFlag) in the directive of second control. I think aFlag is a child scope variable but I can't retrieve a child scope in the function toggleAFlag() to set the flag to it as well as how to access that flag in the directive.

Below is my html code

<div ng-app="myapp">
  <div ng-controller="AppCtrl">
    <div ng-repeat="item in itemList">
        <div>                   
            <select ng-options="addressType.name for addressType in item.addressTypes" ng-model="addressType"
              ng-change="toggleAFlag(addressType)" >
            </select>
        </div>
        <div> <input type="text" ng-model="value" my-directive></input></div>
    </div>
  </div>    
</div>

Javascript

function AppCtrl(){  
  $scope.toggleAFlag = function(addressType) {
    if (addressType == 'Business')
        $scope.AFlag = true;
    else {
        $scope.AFlag = false;
    }
  };
}

var myapp = angular.module('myapp',[]);

myapp.directive('myDirective', function(){
    return {
        require: '?ngModel',
        link: function(scope, element, attrs, model){
            if (scope.AFlag == true){
                //do something on element variable
            }
        }
    };
});

Use $parent. in front of the variables that are in child scopes from the repeats. For instance scope.$parent.AFlag — Zack Argyle
– Zack Argyle, Commented Aug 15, 2013 at 16:54

zs2020 · Accepted Answer · 2013-08-16 02:51:36Z

1

I assume the data model looks like this

$scope.itemList = [{
    addressTypes: [{
        name: 'add1',
        addressType: 'Business'
    }, {
        name: 'add2',
        addressType: 'Non Business'
    }]
}];

Make following changes:

ng-change="toggleAFlag(addressType.addressType)"   //pass in the addressType value of the current obj

<input type="text" ng-model="AFlag" my-directive></input>  //use AFLag as ng-model, Angularjs binds it automatically

link: function (scope, element, attrs, model) {
    scope.$watch(function () {  //use $watch to watch any change, so the logic will be triggered if there is any change relating to the scope.
        if (scope.AFlag == true) {
            //do something on element variable
        }
    })
}

Demo

edited Aug 16, 2013 at 2:51

answered Aug 15, 2013 at 16:57

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bnguyen82 Over a year ago

Thanks for your nice answer and sorry for my late comment. However, if I add one more item in itemList, then I have 2 dropdown, choosing a dropdown, two textfields receive the same value of AFlag. Where can I put toggleAFlag() as well as AFlag so that each textfields receive just AFlag of its own scope (a ngrepeat scope). Thanks again.

zs2020 Over a year ago

@bnguyen82 I just updated the Demo. You can store the status in the addressType object. Please take a look.

bnguyen82 Over a year ago

In my web app, the ng-model tag in second control is already used by a main model and we can't use it to attach our data. So I use a custom attributes like this <input type="text" ng-model="value" my-directive custom-attr="AFlag"></input> and in my-directive, watch it by scope.$observe but by this solution AFlag is shared by all items in ngrepeat while I need a seperate AFlag for each ngrepeat. Can you suggest a hint?

Collectives™ on Stack Overflow

AngularJS access ngrepeat child scope variable in directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related