CODEWITHSUNDEEP
angularjsangularjs-scope
Robert
Robert

Reputation: 135

Passing scope data from a function to parent scope?

In my controller I have a $http call which returns a json string which I then want to pass to a directive to be added to a map. The string is being passed from the controller to the directive fine but not from from the $http function within the controller to the directive. 

 wmm.controller('wapMapClr', ['$rootScope', '$scope', '$window', '$http', function ($rootScope, $scope, $window, $http) {

$scope.geobj = {};
$scope.geobj.geoprop = ""

// Search by postcode
// create a blank object to hold our form information
$scope.formData = {};
$scope.pcSearch = function () {
$scope.data = {};

$http.post('api/api.php', { postcode: $scope.formData } )
    .success(function (result) {

       $scope.geobj = {geoprop : result.json_string};
      console.log($scope.geobj.geoprop);

Any help would really appreciated. Thanks

Upvotes: 0

Views: 47

Answers (2)

Robert
Robert

Reputation: 135

Thanks Thalaivar. I modified the code you gave and it worked. See below:

wmm.controller('wapMapClr', ['$scope', '$window', '$http', function ($scope, $window, $http) {

$scope.geobj = {};

// Search by postcode
// create a blank object to hold our form information
$scope.formData = {};
$scope.pcSearch = function () {
$scope.data = {};

$http.post('api/api.php', { postcode: $scope.formData } )
    .success(function (result) {

        $scope.geobj = {geoprop : result.json_string};

Then in the directive...

wmm.directive('tchOlMap', function () {

    var MAP_DOM_ELEMENT_ID = 'tchMap';

    return {

        restrict: 'E',
        //BELOW IS THE LINE I CHANGED TO MAKE IT WORK!
        scope: false,
        replace: true,
        template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height"></div>',

        link: function postLink(scope, element, attrs) {

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23642

Promises are asynchronous, so you don't know when the promise returns, so it won't be immediately available for you

  1. Your directive has a controller method, from where you can fire the $http call which you can access.

  2. You can use $emit/$brodcast to listen to events passed from controller to your directive.

I am not sure what error you get, here is a fiddle with $timeout used which is async which works.

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

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=' },
        template: '<div>Hello, {{obj.prop}}!</div>'
    };
});

myApp.controller('MyCtrl', function ($scope, $timeout) {
    $scope.obj = { prop: "world" };
    $timeout(function(){
       $scope.obj = { prop: "from timeout" };
    },10000);
});

https://jsfiddle.net/jt6j82by/

Upvotes: 1

Related Questions