在组件的 templateUrl 中调用控制器函数

Question

有没有办法在封装在 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>

我在哪里使用组件：

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

澄清； cancelTaxi 是 TaxiesController 的一个功能，它已经在 html 网站上运行，我在其中使用 . templateUrl 中的所有属性都正确显示，但我不知道如何通过单击按钮来取消出租车的功能。

哦，是的，我在函数中做了一个 console.log，它甚至没有注册它...

感谢您的宝贵时间！

Answer 1

这是因为组件的范围是隔离的。你可以做两件事：

将您的 TaxiesController 转换为组件，并 require 在 taxiCard 中 require。

.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。

在组件的 templateUrl 中调用控制器函数

Call a controller function in a component's templateUrl

html

controller

angularjs

angularjs-components

angularjs-material