0
Angular를 사용하여 검색 대화 상자를 시작할 버튼에 지시문을 작성하려고합니다. 검색 단추의 인스턴스가 여러 개 있지만 분명히 대화 상자의 인스턴스 하나만 필요합니다. 대화 상자는 템플리트 URL을 기반으로 만들어 져야하며 자체 컨트롤러가 있어야하지만 사용자가 항목을 선택하면 지시문을 사용하여 값을 설정합니다.Angular 지시문을 사용하여 대화 상자를 표시하려면 어떻게합니까?
지침에서 컨트롤러를 사용하여 대화 상자를 만드는 방법에 대한 아이디어가 있습니까? 여기
은 여기<a href="" my-find="setPerson">Find</a>
... 여기
http://plnkr.co/edit/W9CHO7pfIo9d7KDe3wH6?p=preview
위 plkr에서 HTML입니다 ... 내가 지금까지 (기본적으로 단지 지시어를) 이동했습니다 무엇 위의 코드에서 코드는 ...var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var person = {};
person.name = 'World';
$scope.person = person;
$scope.setPerson = function(newPerson) {
person = newPerson;
$scope.person = person;
}
});
app.directive('myFind', function() {
var $dlg; // holds the reference to the dialog. Only 1 per app.
return {
restrict: 'A',
link: function (scope, el, attrs) {
if (!$dlg) {
//todo: create the dialog from a template.
$dlg = true;
}
el.bind('click', function() {
//todo: use the dialog box to search.
// This is just test data to show what I'm trying to accomplish.
alert('Find Person');
var foundPerson = {};
foundPerson.name = 'Brian';
scope.$apply(function() {
scope[attrs.myFind](foundPerson);
});
});
}
}
})
이것은 내가봤을 때까지입니다. 필자는 지시어 내에서 템플릿을 사용하여 대화 상자를 만드는 방법을 알아낼 수 없으므로 한 번만 발생하고 컨트롤러에 할당합니다. 나는 템플릿 안에 컨트롤러를 할당 할 수 있다고 생각하지만 먼저 템플릿을로드하고 커스텀 jQuery 플러그인을 호출하여 대화 상자를 생성하는 방법을 알아야한다. (대화 상자에 대한 느낌은 &이다.)
그래서 질문은, 어떻게 지시문 안에 템플릿을로드합니까? 그러나이 문제에 대해 다른 생각을하면, 나는 그것에 대해서도 관심을 가질 것이다.