角度：从父范围调用/ triigering指令方法

Question

在我的应用程序中我定义了一个指令，实现了一个简单的滑块与下一个/ prev/goto方法。
然后滑块位于由另一个控制器管理的html snipet内。 问题是，最后一张幻灯片包含一个表单，所以如果提交是好的，我想去下一张幻灯片。

在旧的javascript中，为了应用该回调，我会将回调传递给submit方法。
我做了同样的事情。这是最好的/有角度的方式来做到这一点？

使用Javascript（我省略了一些细节）：

.directive("sfCarousel", function() { 
    return { 
     scope: true, 
     restrict: 'A', 
     controller: function($scope) { 
      var slides = $scope.slides = []; 
      var currentIndex = $scope.currentIndex = -1; 

      $scope.next = function() { 
       //mynextfunction... 
      } 
     }, 
     link: function(scope, element, attrs) { 
      console.log("sf-carousel"); 
     } 
    } 
}) 
.directive("sfCarouselItem", function() { 
    return { 
     scope: true, 
     require: '^sfCarousel', 
     link: function(scope, element, attrs, sfCarouselController) { 
      console.log("sf-carousel-item"); 
      sfCarouselController.addSlide(scope); 
     } 
    } 
}) 
.controller("mycontroller", ['$scope', function($scope) { 
    $scope.submit = function (callback) { 
     //if submit is ok then 
     callback.apply(null, []); 
    } 
}]) 

HTML：

<div sf-carousel > 
    <div sf-carousel-item ng-class="{'active':active}" > 
     <div>my first slide</div> 
     <div sf-label="get-started.submit" ng-click="next()" ></div> 
    </div> 
    <div sf-carousel-item ng-class="{'active':active}" > 
     <form> 
      <!--here my form--> 
      <button type="submit" ng-click="submit(next)">submit and go</button> 
     </form> 
    </div> 
    <div sf-carousel-item ng-class="{'active':active}" > 
     <div>my last slide</div> 
     <!--other things--> 
    </div> 
</div> 

Answer 1

您可以通过function你什么父控制器上运行。

// directive sfCarousel 

return { 
transclude: true, 
template: '<div class="sf-carousel" ng-transclude></div>', 
// ... 
}; 
// directive sfCarouselItem 
return { 
    transclude: true, 
    scope: { 
    func: '&', 
    // ... 
    }, 
    template: '<div class="sf-carousel-item" ng-transclude></div>', 
} 


// controller html 

<div sf-carousel > 
    <div sf-carousel-item ng-class="{'active':active}" > 
     <div>my first slide</div> 
     <div sf-label="get-started.submit" ng-click="next()" ></div> 
    </div> 
    <div sf-carousel-item func="next()" ng-class="{'active':active}" > 
     <form> 
      <!--here my form--> 
      <button type="submit" ng-click="func({})">submit and go</button> 
     </form> 
    </div> 
    <div sf-carousel-item ng-class="{'active':active}" > 
     <div>my last slide</div> 
     <!--other things--> 
    </div> 
</div>