Вызов функции контроллера в templateUrl компонента

Есть ли способ вызвать функцию контроллера внутри компонента, инкапсулированного внутри div, который уже запущен этим контроллером?

Компонент:

angular
.module('myApp')
.component('taxiCard', {
    templateUrl: '/templates/taxi.html',
    bindings: { 
        taxi: '=' ,
        cancelTaxi: '='
    },
})

Функция контроллера, которую я хочу использовать в шаблоне:

$scope.cancelTaxi = (taxi, id) => {
   console.log('cancelling..')
   taxi.available = true;
   taxi.history.unshift(cancel);
   dataFactory.updateTaxi(id, taxi).then(function(response){ 
   });
}

templateUrl компонента:

<md-card style="width: 300px;">
{{$ctrl.taxi._id}}
<md-button ng-show="$ctrl.taxi.available" ng-href="#!/taxies/rent/{{$ctrl.taxi._id}}">Najem</md-button> <!-- show if taxi.available -->
<md-button ng-hide="$ctrl.taxi.available" ng-click="$ctrl.cancelTaxi($ctrl.taxi, $ctrl.taxi._id)" type="submit">Preklici</md-button><!-- show if !taxi.available, torej cancel ce je rentan atm-->
<img ng-src="{{$ctrl.taxi.photo_url}}" class="md-card-image" alt="$ctrl.taxi.name" style="height:250px">
<md-card-title>
    <md-card-title-text>
    <span class="md-headline">{{$ctrl.taxi.name}}</span>
    </md-card-title-text>
</md-card-title>
<md-card-content>
    Leto izdelave: {{$ctrl.taxi.year}} <br>
    Max potnikov: {{$ctrl.taxi.max_p}} <br>
    Max hitrost: {{$ctrl.taxi.max_s}} <br>
</md-card-content>
<md-card-actions layout="row" layout-align="end center">
    <md-button ng-href="#!/taxies/details/{{$ctrl.taxi._id}}">Podrobnosti</md-button>
</md-card-actions>

Where I'm using the component: 

<div class="md-padding" layout="row" ng-init="getTaxies()" layout-wrap>
<div ng-repeat="taxi in taxies">
    <a href="#!" ng-click="removeTaxi(taxi._id)">Delete</a>
    <taxi-card  taxi="taxi" 
                cancelTaxi="cancelTaxi">
    </taxi-card>   
</div>

To clarify; cancelTaxi is a function that's part of the TaxiesController, which is already run on the html site, where i use the . All the attributes in the templateUrl are displaying properly, but I don't know how to get the function to cancel the taxi on clicking the button working.

Ах да, я сделал console.log в функции, и она даже не регистрирует его...

Спасибо за ваше время и вклад!


controller html angularjs angularjs-material angularjs-components
person Vid    schedule 20.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это связано с тем, что область действия компонента изолирована. Вы можете сделать две вещи:

Преобразуйте свой TaxiesController в компонент и require в taxiCard.

.component('taxiCard', {
    templateUrl: '/templates/taxi.html',
    require: {
        TaxiesController: '^TaxiesController' // ^ will look for all parents
    }
    controllerAs: 'taxiCard'
})

HTML:

<div ng-click="taxiCard.TaxiesController.cancelTaxi(taxi, id)"></div>

Или поместите все свои функции из TaxiesController внутрь сервиса и добавьте его как зависимость к вашему компоненту taxiCard:

.component('taxiCard', {
    templateUrl: '/templates/taxi.html',
    controllerAs: 'taxiCard',
    controller: function(taxiesService) {
        this.cancelTaxi = (taxi, id) => {
            taxiesService.cancelTaxi(taxi, id);
        }
    }
})

шаблон:

<div ng-click="taxiCard.cancelTaxi(taxi, id)"></div>

Совет. Используйте синтаксис controllerAs и по возможности старайтесь избегать $scope.

person Jeffrey Roosendaal    schedule 20.02.2018
comment
Спасибо за ваш ответ! Я попытаюсь сделать это, превратив контроллер в компонент. - person Vid; 20.02.2018
comment
Дай мне знать. У меня была такая же проблема пару дней назад, и мне удалось ее решить. Так что я уверен, что смогу вам помочь. - person Jeffrey Roosendaal; 20.02.2018
comment
Хорошо, я поместил функции в службу и добавил их как зависимость, однако функция все еще не вызывается (console.log ничего не отображает). Вот код отредактированного кода: codepen.io/anon/pen/zRWVNY - person Vid; 21.02.2018
comment
Я просто удалил двустороннюю привязку данных: cancelTaxi: '=' и она заработала. Не могли бы вы объяснить, почему? - person Vid; 21.02.2018
comment
Ах, это моя ошибка, я просто скопировал это из вашего примера. Я думаю: связывая cancelTaxi, он создает ссылку this.cancelTaxi. Затем в вашем контроллере вы создаете функцию this.cancelTaxi. Поэтому одно перезаписывает другое. Я думаю, что привязка «выигрывает», поэтому ваша функция перезаписывается/потеряна. Я думаю, вы можете снова добавить привязку и просто дать своей функции другое имя, и они будут работать в обоих случаях. - person Jeffrey Roosendaal; 21.02.2018