2016-04-24 8 views
0

私のコントローラには、マップに追加するディレクティブに渡したいjson文字列を返す$ http呼び出しがあります。文字列はコントローラーからディレクティブに正しく渡されますが、コントローラー内の$ http関数からディレクティブには渡されません。関数から親スコープにスコープデータを渡す?

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

本当にありがとうございます。 promise戻ると、それはあなたのためにすぐに使用することはできませんので、ときあなたが知っていないので、おかげで

+0

あなたはすべてのエラーを取得していますか? – Thalaivar

+0

こんにちは私は何のエラーもなかった - ただ空の文字列。 – Robert

答えて

1

Promisesは、非同期である

  1. あなたのディレクティブは、あなたが発射できるところからcontroller方法を、持っていますあなたがアクセスできる$httpコール。

  2. $emit/$brodcastを使用して、controllerからディレクティブに渡されたイベントを再生することができます。

は、私はここで働くasyncで使用$timeoutとフィドルは、何を得るのエラーを確認していません。

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/

0

おかげThalaivar。私はあなたが与えたコードを修正した。以下を参照してください:

ディレクティブで次に
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}; 

を...

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) { 
関連する問題