angularjs:在 ui-bootstrap 模态中使用指令 [英] angularjs: using a directive inside the ui-bootstrap modal

问题描述

我不知道如何从使用 $dialog 服务创建的模态中调用指令.该指令还应该能够看到模态上的按钮并覆盖它们的 ng-click 操作.

这是我的模态模板:

<h1>Rechercher</h1>
<div class="modal-body"><搜索人></搜索人>

<div class="modal-footer"><button ng-click="close(result)" class="btn btn-primary">关闭</button>

searchPerson 指令模板:

{{test}}

searchPerson 指令本身:

angular.module('person.directives').directive("searchPerson", ['PersonService', function (PersonService) {返回 {限制:E"，templateUrl: "person/views/searchPerson.html",范围: {}，控制器:'searchPersonCtrl'}}]);

searchPerson 控制器:

angular.module('person.controllers').controller('searchPersonCtrl', ['$scope', function ($scope) {$scope.test = 2;}]);

最后是模态控制器:

 angular.module('person.controllers').controller('DialogController', ['$scope', 'dialog', function($scope, dialog) {$scope.test = 2;$scope.close = 函数(结果){alert('模态范围');dialog.close($scope.test);};}]);

那么如何让 searchPerson 控制器和模态控制器相互通信呢?

解决方案

我觉得我走得太远了.Modal 不再有模板和控制器，内部还有一个指令，模态现在是指令的模板.代码如下:

<h1>Rechercher</h1>
<div class="modal-body"><!-- 这曾经是 searchPerson 指令，但现在 Modal 和指令只是同一个指令 --><span>{{test}}</span>

<div class="modal-footer"><button ng-click="close(result)" class="btn btn-primary">关闭</button>

I can't figure out how to call a directive from within a modal created with the $dialog service. That directive should also be able to see the buttons on the modal and override their ng-click action.

Here's my modal template:

<div class="modal-header">
<h1>Rechercher</h1>
</div>
<div class="modal-body">

  <search-person></search-person>

</div>
<div class="modal-footer">
  <button ng-click="close(result)" class="btn btn-primary">Close</button>
</div>

the searchPerson directive template:

<span>{{test}}</span>

the searchPerson directive itself:

angular.module('person.directives').directive("searchPerson", ['PersonService',    function (PersonService) {
return {
    restrict: "E",
    templateUrl: "person/views/searchPerson.html",
    scope: {},
    controller: 'searchPersonCtrl'
}
}]);

the searchPerson controller:

angular.module('person.controllers').controller('searchPersonCtrl', ['$scope', function ($scope) {
   $scope.test = 2;    
}]);

and finally the modal controller:

 angular.module('person.controllers').controller('DialogController', ['$scope', 'dialog', function($scope, dialog) {
    $scope.test = 2;
    $scope.close = function (result) {
       alert('modal scope');
       dialog.close($scope.test);
    };
 }]);

So how do I make the searchPerson controller and the modal controller communicate with each other ?

解决方案

I think I went a step too far. Instead of having a template and a controller for Modal, and a directive inside, the modal is now the template for the directive. Here's the code:

<div class="modal-header">
<h1>Rechercher</h1>
</div>
<div class="modal-body">

<!-- this used to be the searchPerson directive but now the Modal and the directive are just the same directive -->
<span>{{test}}</span>


</div>
<div class="modal-footer">
   <button ng-click="close(result)" class="btn btn-primary">Close</button>
</div>

这篇关于angularjs:在 ui-bootstrap 模态中使用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！