Angular JS - 单击加载控制器功能

Question

我正在创建一个用于练习的带有 Angular 的小型活动应用程序。目前我已经使用 Laravel 5.1 创建了一个应用程序并返回了一些带有 JSON 的 URL。我在我的工厂中为这些事件加载了这些 URL。这些事件将使用 Angular 呈现。渲染后，将放置一个带有“显示信息”的按钮，当您单击它时，我想在 EventController 中调用一个函数，以便我的 $scope.event 接收新数据。我的控制器具有 $scope.getEvent(eventID); 的功能但我不知道如何在点击时运行该功能。

//Controller
app.controller('EventController', ['$scope', 'eventFactory', '$http', function ( $scope, eventFactory, $http )
{
    eventFactory.getEvents(1).then(function(response){
        $scope.events = response.events;
        $scope.eventPaginator = response.pagination;
    });

    $scope.getEvent = function(value){
        console.log('trigger');
        eventFactory.getEvent(value).then(function(response){
            $scope.event = response;
        });
    };

    $scope.loadPage = function(page){
        eventFactory.getEvents(page).then(function(response){
            $scope.events = response.events;
            $scope.eventPaginator = response.pagination;
        });
    };


}]);

//Directive
app.directive('event', function() {
    return {
        restrict: 'E',
        scope: {
            data: '=',
            loadEvent: '&',
        },
        templateUrl: '/assets/website/angular/views/event.html',
        link: function(scope, element){
            scope.loadEvent(function(){
                alert('Click')
            });
        },
    };
});

//Factory
app.factory('eventFactory', ['$http', function ( $http )
{
    return {
        getEvents: function (page)
        {
            return $http.get('/api/v1/events?page='+page)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        },
        getEvent: function (id)
        {
            return $http.get('/api/v1/event/'+id)
                    .then(function ( response )
                    {
                        return response.data;
                    });
        }
    };
}]);


//View
<div class="event">
    <h2>[[data.event.title]] ID: [[data.event.id]]</h2>
    <div class="event-image">

    </div>
    <div ng-click="loadEvent(data.event.id)">Click voor [[data.event.id]]</div>
</div>




//HTML code for the Laravel View
<div class="col-md-9" ng-controller="EventController">
            <div class="btn btn-success" ng-click="getEvent(15)">Test</div>
            <div class="row">
                <h1 ng-bind="showEvent.event.title"></h1>
                {#<div class="col-md-12">#}
                    {#<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>#}
                    {#<div ng-controller="BannerController">#}
                        {#<ul rn-carousel rn-carousel-auto-slide="3" rn-carousel-transition="slide" rn-carousel-duration="1000" class="image carousel">#}
                            {#<li ng-repeat="banner in banners">#}
                                {#<img ng-src="[[banner.image]]" alt="" class="img-responsive">#}
                            {#</li>#}
                        {#</ul>#}
                    {#</div>#}
                {#</div>#}
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-4" ng-repeat="event in events">
                            <h1>Een event</h1>
                            <event data="event"></event>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h3>[[eventPaginator.total]]</h3>
                  <div class="pagination">
                        <div ng-repeat="n in [] | range:eventPaginator.total">
                            <button ng-click="loadPage(n+1)">[[n+1]]</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

我想你想从指令模板调用父控制器函数，并传递id 参数给它。为此，您需要通过在指令元素上添加带有getEvent(id) 的load-event 属性来传递对指令的方法引用。

您还应该删除其中包含错误代码的不需要的链接。

//below code should remove from the directive.
scope.loadEvent(function(){
    alert('Click')
});

指令模板

<event data="event" load-event="getEvent(id)"></event>

模板

<div ng-click="loadEvent({id: data.event.id})">Click voor [[data.event.id]]</div>