CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
spuppett
spuppett

Reputation: 557

How do I pass a variable from the parent scope to a child scope in AngularJS

I have a partial page with code similar to the following:

<div class="selector-result row">
    <div ng-if="resultCtrl.result">
        <div class="col-xs-12">
            <h4><strong>We Recommend:</strong></h4>
            <h2><strong>{{resultCtrl.result.Name}}</strong></h2>
        </div>
        <div class="row">
            <div class="col-md-4">

                <div ng-controller="selectorResultCarouselController">
                    <div>
                        <div style="height: 305px">
                        <carousel interval="myInterval" no-wrap="false">
                            <slide ng-repeat="slide in slides" active="slide.active" actual="slide">
                            <img ng-src="{{slide.image}}" style="margin:auto;">
                            </slide>
                        </carousel>
                        </div>
                    </div>
                </div>
...

I have a module that has a directive (selectorResult) with a controllerAs resultCtrl. There is a controller in there too, selectorResultController, which loads a variable 'results'.

What I'd like to do is get {{resultCtrl.result.AllImages}} into selectorResultCarouselController somehow so that I can add them to my carousel. I'm lost. I'm trying really hard to understand Angular, and I think I understand how the pieces work, I just am not understanding the system, if that makes sense.

I'm just looking for a little nudge here. I've read and read and read, but I've not seen anything that is shining light on this problem.

Upvotes: 1

Views: 3228

Answers (4)

Caleb Williams
Caleb Williams

Reputation: 1065

To avoid $scope confusion, consider using AngularJS's controllerAs syntax. Basically, instead of attaching values to $scope, you attach them to the controller object itself. So:

angular.module('myApp', [])
  .controller('ctrlOne', [function() {
    var self = this;
    self.name = 'ctrlOne';
  }])
  .controller('ctrlTwo', [function() {
    var self = this;
    self.name = 'ctrlTwo';
  }]);

and

<div ng-app="myApp">
  <div ng-controller="ctrlOne as one">
    <div ng-controller="ctrlTwo as two">
      <p>{{one.name}}</p> <!-- 'ctrlOne' -->
      <p>{{two.name}}</p> <!-- 'ctrlTwo' -->
    </div>
  </div>
</div>

Upvotes: 3

kilogic
kilogic

Reputation: 132

If your directive has an isolate scope, you will have to bind it through attributes in your directive definition object (ddo). The attributes &, @, and = will allow you to do this.

scope { myAttribute: '@', myOtherAttribute: '&', myLastAttribute: '='}

And in your directive you would use something like:

<my-directive my-attribute="someString" my-other-attribute="someCallbackOnControllerScope()" my-last-attribute="somePropertyOnControllerScopeYouWantToBindTwoWays">

Please note that if you use the '@', it will passed as a string and you will have to parse it against the parent scope to turn it into an object (in the directive's post-link function):

$parse(myAttribute)(scope.$parent)

Otherwise your ddo can have a scope property set to false, in which case it will use the parent scope.

If you have a scope property set to true in the ddo you can still address the parent scope property (by referencing it as if you had no child scope/as if it were in that same scope already available), though be careful if you do this (scope: true) and have multiple of the same directives... As they will all share the same scope and thus override each other.

Please check this page out for more information: AngularJS Documentation

I hope this was helpful

Upvotes: 2

Sim
Sim

Reputation: 3317

A "child scope" (prototypically) inherits properties from its parent scope.

from: https://docs.angularjs.org/guide/scope.

In your case, in your child scope your variable is available as $scope.result.Allmages.

Upvotes: 2

Chet
Chet

Reputation: 3729

Child scope inherits from the parent. So just use $scope.result.AllImages.

Upvotes: 2

Related Questions