如何將數據從控制器傳遞到自定義指令

Question

我正在AngularJS中創建一個自定義指令。 該指令應打開一個彈出窗口以顯示數據。 彈出窗口的代碼在另一個html頁面中，並且自定義指令將代碼注入到我的主頁中。 我可以打開彈出窗口，但是無法在彈出窗口中的任何位置顯示現有數據。

通常，我可以在主頁上顯示數據，但是數據只是不想進入custom指令注入的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>

這是在彈出控制器中顯示數據的方式：（僅供參考，它仍被修剪）

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