Как передать данные от контроллера к пользовательской директиве

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

Это, как я использую директиву в MainPage

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