Access AngularJS scope from Directives

Question

I'm trying to access a scope variable defined in the app controller so i can update on a click event from Directive i've created, but it doesn't seem to be able to access the global scope from its isolated scope.

the scope variable is defined (currentTitle):

app.controller('news', function($scope, $http, $timeout) {
$scope.promise = $timeout(function() { //This is here just to mock the asynchronous loading of the data
$scope.articles = [{
  title: 'Article 1',
  content: 'It works!'
}, {
  title: 'Article 2',
  content: 'It still works'
}]
}, 3000);

$scope.currentTitle = "my - title";
$scope.showDetails = false;
});

and the scope defined in the directive is:

scope: {
  //bind the showDetails into the scope so it can be seen by all of the accordion elements
  promise: '&?',
  currentTitle: '=?',
  showDetails: '=?bind'
}

here is a codePen that contains all the code: http://codepen.io/valecarlos/pen/bpmryw

What i want to do, is to update the header title, when one of the titles is clicked, for now i'm just trying to hardcode an update on the scope's currentTitle variable and $apply-inside the click event in the directive-, but i don't see it reflected on the header's title.

Thank you!

SuperVeetz · Accepted Answer · 2016-04-28 17:46:47Z

Try setting your currentTitle key on your directive scope to this. It will create a 2-way binding allowing you to easily change the currentTitle in your parent controller from your directive's scope.

JS

  scope: {
    ...
    currentTitle: '=',
    ...
  },

HTML

         <accordion promise="promise" current-title="currentTitle">
            <!--<dt ng-repeat-start="article in articles" ng-class="showDetails ? 'show-titles' : 'show-titles-not'">.-->
            <dt ng-repeat-start="article in articles" ng-class="{'show-titles' : showDetails}">
            <div class="grid-30">
                <div class="round-div"></div>
            </div>
            <div class="grid-70">
                <h5>{{article.title}}</h5>
            </div>

            </dt>
            <dd ng-repeat-end="" ng-class="{'show-titles' : showDetails}">
                <div class="grid-40">
                    <img src={{article.image}} alt="">
                </div>
                <div class="grid-60">
                    <div class="news-desc">
                        <h5>
                            {{article.title}}
                        </h5>
                        <p>
                            {{article.content}}
                        </p>
                    </div>
                </div>
            </dd>
        </accordion>

Thank you!, I had tried setting the currentTitle: to '=', but i was totally missing the definition in the HTML tag to complete the 2 way binding, cheers!

Amy Blankenship · Accepted Answer · 2016-04-28 17:30:05Z

1

If you pass in a function with the "&" syntax, you should be able to call it within the directive.

Let's assume the function in the controller looks like this:

$scope.someFunction = function(someParameter) {...}

Then your directive will look like this:

...
    scope {
      someFunction: "&"
   }
...
//in link or controller
$scope.someFunction({someParameter:'foo'});

answered Apr 28, 2016 at 17:30

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

2 Comments

Carlos Valencia Over a year ago

thanks! i've change it to currentTitle: '&', but it doesn't work either, maybe because it's not a function but a variable?

Amy Blankenship Over a year ago

Yes, your function in the parent scope would then take the variable you pass to the function and make the change on its own scope. Alternatively, $emit an event. Or don't use an isolate scope.

Collectives™ on Stack Overflow

Access AngularJS scope from Directives

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related