Question

我正在创建一个带角度的小型活动应用程序来练习。目前我已经使用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参数。为此，您需要通过在指令元素上添加load-event属性getEvent(id)来将方法引用传递给指令。

此外，您应该删除包含错误代码的不需要的链接。

//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>

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

1 个答案: