Question

在我的应用程序中，我定义了一个指令，它使用next / 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>

angular：来自父范围的调用/ triigering指令方法

1 个答案: