[英]How to pass data from controller to custom directive
I am creating a custom directive in AngularJS. 我正在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.
弹出窗口的代码在另一个html页面中,并且自定义指令将代码注入到我的主页中。 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. 通常,我可以在主页上显示数据,但是数据只是不想进入custom指令注入的html中。
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: 这是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!";
});
};
}); });
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()
};
}
}
});
Solved the problem like below. 解决了如下问题。 It was only to inject to $scope in the directive controller.
它只是在指令控制器中注入$ scope。
myApp.directive("updateCandidatePopup", function () {
return {
templateUrl : "UpdateCandidatePopup.html",
restrict: 'E',
controller: function ($scope) {
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.