CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Carlos Valencia
Carlos Valencia

Reputation: 6963

Access AngularJS scope from Directives

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!

Upvotes: 1

Views: 77

Answers (2)

SuperVeetz
SuperVeetz

Reputation: 2176

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>

Upvotes: 2

Amy Blankenship
Amy Blankenship

Reputation: 6961

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'});

Upvotes: 1

Related Questions