Not able to access scope from directive of controller in AngularJS

Question

I am new to AngularJS, I have used service to get data from back end and received it in controller,now I have to parse those values and dynamically create elements in directive,when I am trying to do so I am getting undefined for values in controller.

app.js:

var app = angular.module('childAid', ["myDirectives"]);
app.controller('headerController', function($scope, headerFactory) {
    debugger
    headerFactory.getAllChallenges()
        .then(function(data) {
            $scope.challengeslist = data.header;
        });
});

directiveExample.js

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

myDirectives.directive('headerPicker', function() {
    return {
        restrict: 'AE',
        templateUrl: 'component/views/header.html',
        link: function($scope, element, attributes) {
            console.log('linking foo ' + $scope.challengeslist);
        }
    };
});

serviceExample.js: (function() {

 angular .module('childAid').factory('headerFactory', headerFactory);

  function headerFactory($http) {
     function getAllChallenges() {
      debugger
      return $http
      .get('resources/stubs/details_tree.json')
      .then(complete)
      .catch(failed);
  }

  // helper function to handle the resolved promise
  function complete(response) {
    debugger
   return response.data;
  }

  // helper function to handle the rejected promise
  function failed(error) {
    console.error(error.statusText);
  }

  return {
    getAllChallenges: getAllChallenges
  };
}

headerFactory.$inject = ['$http']; })();

index.html:

 <div ng-app="childAid" ng-controller="headerController"> 
  <div class="container">
  <h2>Displaying Header</h2>
    <header-picker></header-picker>
  </div>

I don't know where I am doing wrong,Kindly help I am new to AngularJS.

Answer 1

Have you tried using an isolate scope on your directive. It might work out easier for you if you tried something like this..

DEMO

Obviously I don't have access to your api so I've mocked it using a public dummy api, so you will have to modify this to work with your own server.

The important bits are..

return {
        restrict: 'AE',
        templateUrl: 'header.html',
        scope: {
          'challengesList' : '='
        }
    };

.. in your directive, and

<header-picker challenges-list='challengesList'></header-picker>

.. in your html.

Here's the whole thing for reference. Hope you find it useful. Sorry if you've already tried this.

app.js

var app = angular.module('childAid', ["myDirectives"]);

app.controller('headerController', function($scope, headerFactory) {
    debugger

    headerFactory.getAllChallenges()
        .then(function(response) {
            $scope.data = response;
            // $scope.challengesList = data.header;

            // dummy response has a data.title property, 
            $scope.challengesList = response.data.title;
        });
});

angular
  .module('childAid')
  .factory('headerFactory', headerFactory);

headerFactory.$inject = ['$http']; 

function headerFactory($http) {

  function getAllChallenges() {
    debugger

    // var url = 'resources/stubs/details_tree.json';

    // dummy api for demo purposes, obviously delete this 
    // and uncomment your own url for your own app

    var url = 'http://jsonplaceholder.typicode.com/posts/1';

    return $http
      .get(url)
      .catch(failed);
  }

  // helper function to handle the rejected promise
  function failed(error) {
    console.error(error.statusText);
  }

  return {
    getAllChallenges: getAllChallenges
  };

}

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

myDirectives.directive('headerPicker', function() {
    return {
        restrict: 'AE',
        templateUrl: 'header.html',
        scope: {
          'challengesList' : '='
        }
    };
});

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-app="childAid" ng-controller="headerController"> 
    <pre>{{data}}</pre>
      <div class="container">
        <h2>Displaying Header</h2>
        <header-picker challenges-list='challengesList'></header-picker>
      </div>
    </div>
  </body>

</html>

header.html

<p>challengeslist = {{challengesList}}</p>

Not able to access scope from directive of controller in AngularJS

Question

1 answers

solution1
0 ACCPTED 2015-07-13 12:11:19

Not able to access scope from directive of controller in AngularJS

Question

1 answers

solution1 0 ACCPTED 2015-07-13 12:11:19

solution1
0 ACCPTED 2015-07-13 12:11:19