Question

我在dt模块下创建了一个名为dt-modal的指令。在我的主应用程序模块demo中，我使用这个具有独立范围的dt-modal。我创建了这个指令，以便在指令中编写的HTML表单被转换，因为我想将这个模式重用于许多不同的形式。

<dt-modal>
    <form ng-controller="ReviewFormController" 
          name="reviewForm" 
          novalidate 
          ng-submit="reviewForm.$valid && submitReview(review)">

      <!-- form contents here --> 

    </form>
</dt-modal>

这个被转换的表单有一个名为ReviewFormController的自定义控制器，用于侦听提交事件。如何在ReviewFormController中的submitReview（）中调用dt-modal范围的close（）方法？

这是一个JSBin。如果你按ESC，你可以在指令运行中看到close（）。

http://jsbin.com/cukanole/1/edit

如果不可能，这个指令有更好的设计吗？

提前致谢！

Answer 1

我的建议是使用$emit从控制器触发事件并直接使用$ on。

<强>控制器

scope.$emit("ValueChanged", value);

在指令中，将使用$on捕获事件，如：

$scope.$on("ValueChanged", function(event, ars){
   ... //your event has been triggered.    
});

重要：

指令应该总是独立的组件，如果在指令内部从控制器调用方法（在指令之外），这将在我的指令和控制器之间创建一个依赖关系，当然如果没有另一个，这将迫使一个人无法存在。

如果我必须将设计原则应用于指令，它将是SOLI中的S，单一责任原则。指令应该能够封装和独立工作。

Answer 2

由于您使用的是隔离范围，因此可以将control object传递给指令...

<dt-modal id="review-form-modal" api="modal.api">

并通过双向绑定将close方法添加到其中：

scope: {
  api: '='
},
link: function($scope, $el, attrs) {
  $scope.api = {
    close: function() {
      $el.css({
        display: 'none'
      })
    }
  }
...

然后ng-click可以使用控件对象来调用close：

<button type="submit" ng-click="modal.api.close()">Submit</button>

如果您想尝试此代码here it is on Plunker。

如何在Angular.js中的transclude控制器中调用自定义指令隔离范围上的方法

2 个答案: