コントローラからカスタムディレクティブにデータを渡す方法

Question

私はAngularJSでカスタムディレクティブを作成しています。このディレクティブは、データを表示するためのポップアップを開く必要があります。ポップアップのコードは別のhtmlページにあり、カスタム指示文はメインページにコードを挿入します。ポップアップを開くことはできますが、ポップアップのどこにでも既存のデータを表示することはできません。

通常、私はメインページにデータを表示することができますが、データはカスタムディレクティブによって挿入されたhtmlに入りたくないだけです。

このように私はエラーは発生しませんが、データを渡すことはありません。

注：簡略化するために、ここでコードの一部をトリミングする必要がありました。

これは私のカスタムディレクティブです：

function updateCandidatePopup() { 
    var directive = {}; 
    directive.restrict = "E"; 
    directive.scope = {}; 
    directive.templateUrl = "UpdateCandidatePopup.html"; 
    directive.controller = function ($scope) { 
     $scope.SingleCandidate; 
    } 
    return directive; 
} 

私はそれを登録場所です：

myApp.directive("updateCandidatePopup", UpdateCandidatePopup); 

これは私はこれがメインページに

<update-candidate-popup value="SingleCandidate" class="modal fade" ng-model="SingleCandidate" 
         id="myUpdateModal" 
         role="dialog" 
         popup-data="SingleCandidate"> 
zxc</update-candidate-popup> 

をディレクティブを使用する方法ですUpdateCandidatePopup.html：

<div> {{SingleCandidate.FirstName}} </div> 

これは、ポップアップ・コントローラにデータを表示することである：（FYIそれはまだトリミングされる）

myApp.controller('CandidatesController', function ($scope, $http, EmployerService, CandidateService) { //we injected localservice 
    //Select single data for update 
    $scope.getSingleData = function (C_ID) { 
     alert(C_ID); 
     $http.get('http://localhost:49921/api/Candidates/?C_ID=' + C_ID).success(function (data) { 
      $scope.SingleCandidate = data; 
      $scope.FName = $scope.SingleCandidate.FirstName; 
      alert($scope.SingleCandidate.FirstName); 
      alert($scope.FName); 
     }).error(function() { 
      $scope.error = "An Error has occured while loading posts!"; 
     }); 
    }; 

}）。

Answer 1

ご迷惑をおかけして申し訳ありませんが、ここであなたの問題に役立つコードが見つかりました。あなたが取りたいテンプレートのバックグラウンドで、あなたはコントローラとあなたのポリシーのステートメントの中に、それらの値を使うつもりを入れて、私はあなたのケースでは単に印刷していると思います。

myApp.directive('editkeyvalue', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     key: '=', 
     value: '=', 
     accept: "&" 
    }, 
    template : '<div><label class="control-label">{{key}}</label>' + 
    '<label class="control-label">{{key}}</label>' + 
     '<input type="text" ng-model="value" />'+ 
    '<button type="button" x-ng-click="cancel()">CANCEL</button>' + 
    '<button type="submit" x-ng-click="save()">SAVE</button></div>', 

    controller: function($scope, $element, $attrs, $location) {   
    $scope.save= function() { 
     console.log('from directive', $scope.key, $scope.value);  
     $scope.accept() 
    }; 
    } 
} 
}); 

jsFiddle

Answer 2

は、以下のような問題を解決しました。ディレクティブコントローラの$ scopeに注入するだけでした。

myApp.directive("updateCandidatePopup", function() { 
    return { 
     templateUrl : "UpdateCandidatePopup.html", 
     restrict: 'E', 
     controller: function ($scope) { 
     } 
    } 
});