How to pass data from controller to custom directive

Question

I am creating a custom directive in AngularJS. This directive should open a popup to display data. The code for the popup is in another html page and the custom directive injects the code into my main page. I am able to open the popup however I cannot display the existing data anywhere in the pop up.

Normally, I am able to display the data in the main page however the data just do not want to go into the html injected by the custom directive.

Like this I do not get any error however it does not pass the data.

Note: I had to trim some of the code here to simplify it.

This is my custom directive:

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

This is where I register it:

myApp.directive("updateCandidatePopup", UpdateCandidatePopup);

This is how I use the directive in the mainpage

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

This is the UpdateCandidatePopup.html:

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

This is the to display the data in the pop up controller: (FYI it is still trimmed)

 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!";
        });
    };

});

sioesi · Answer 1 · 2016-10-06T16:52:05.660

Sorry wrong !, answered your question, here I leave I found a code that will serve for your problem. In the background to the template you want to take, you let a controller and in the statement of your policy, put you going to do with those values, I think in your case is just printing.

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

You can leave more of your controller code to better understand the context and see the error? — sioesi, Oct 06 '16 at 16:39
I appreciate your answer! I want to try this but could you tell me where do you found these? — , Oct 06 '16 at 17:06
I made a change in regards to controller definition in the directive but no luck. I am updating the question accordingly with what I have now. — , Oct 06 '16 at 17:20

score 0 · Answer 2 · answered Oct 06 '16 at 19:28

Solved the problem like below. It was only to inject to $scope in the directive controller.

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

How to pass data from controller to custom directive

2 Answers2