如何将数据从控制器传递到自定义指令答案

【问题标题】：How to pass data from controller to custom directive如何将数据从控制器传递到自定义指令
【发布时间】：2016-10-06 15:53:35
【问题描述】：

我正在 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>

这是在弹出控制器中显示数据的方法：（仅供参考，它仍然被修剪）

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

});

【问题讨论】：

标签： angularjs angularjs-directive custom-controls directive

【解决方案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

【讨论】：

您可以留下更多的控制器代码以更好地理解上下文并查看错误吗？
感谢您的回答！我想试试这个，但你能告诉我你在哪里找到的吗？
我对指令中的控制器定义进行了更改，但没有运气。我正在用我现在所拥有的内容相应地更新问题。

【解决方案2】：

解决了如下问题。只是注入到指令控制器中的$scope。

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

【讨论】：