角度：從父範圍調用/ 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>