单击angularjs中的另一个控制器时重新加载控制器

Reloading a controller on click from another controller in angularjs

本文关键字：控制器 新加载 加载 angularjs 另一个 单击      更新时间：2023-09-26

下面是我的html代码，我在中有一个方法

moreThanOne.html

这使得可变

显示

因此，它第一次加载one.html并调用我的控制器的init方法。但每当我再次更改show的值时，它不会重新加载与one.html相关联的控制器。

因此，我在这里的要求是initiatePaymentCtrl的init（）方法应该在我单击与另一个控制器关联的按钮时得到调用，这样数据就会在one.html 上刷新

<div data-ng-if="data.length>1">
 <div data-ng-include="'moreThanOne.html'"></div>
</div>
<div data-ng-if="data.length==1">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>
<div data-ng-if="show">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>

控制器

app.controller('initiatePaymentCtrl', function($scope, $http, paymentService) {
    function init() {
        alert('init');
        var issuerId = paymentService.getIssuerId();
        var paymentItemId = paymentService.getPaymentItemId();
        $scope.paymentOptions = {};
        if (typeof issuerId !== "undefined") {
            paymentService.getPaymentOptions(issuerId,paymentItemId).then(
                    function(paymentOptions) {
                        $scope.paymentOptions = paymentOptions;
                    });
        }
    }
    init();
    $scope.initiateInitialPayment = function(){
        paymentService.initiateInitialPayment();
    }
});

我不能使用服务，因为点击时数据可能不会改变

您肯定应该使用服务。我不知道你说的是什么意思

我不能使用服务，因为点击时数据可能不会改变

如果您怀疑Angular在单击按钮时是否会执行摘要循环，您可以很容易地进行测试。摘要启动后，对$scope的更改应立即出现。

下面是一个简单消息服务的例子，可以用来在控制器之间传递数据：

app.service("messageService", function() {
    this._subscribers = [];
    this.addSubscriber = function(sub) {
        this._subscribers.push(sub);
    };
    this.sendMessage = function(message) {
        var len = this._subscribers.length;
        for (var i = 0; i < len; i++) {
            this._subscribers[i].receive(message);
        }
    };
});

接收者可以订阅以响应消息：

app.controller("responderController", function($scope, messageService) {
    var numClicks = 0;
    $scope.response = "";
    $scope.data = [];
    $scope.show = true;
    $scope.stuff = "Stuff to show at first";
    $scope.otherStuff = "Stuff to show for more than one";
    $scope.oneStuff = "Stuff to show for one";
    this.receive = function(message) {
        if ($scope.show) {
            $scope.show = false;
        }
        if (++numClicks > 2) {
            $scope.data = [];
            $scope.show = true;
            numClicks = 0;
        }
        else {
            $scope.data.push(message);
        }
    };
    messageService.addSubscriber(this);
});

发件人可以使用该服务向所有订户发送消息：

app.controller("senderController", function($scope, messageService) {
    $scope.sendClick = function() {
        messageService.sendMessage("click");
    };
});

这可以在HTML中使用，比如：

<div data-ng-controller="responderController">
    <div data-ng-if="show">{{stuff}}</div>
    <div data-ng-if="data.length > 1">{{otherStuff}}</div>
    <div data-ng-if="data.length==1">{{oneStuff}}</div>
</div>
<button data-ng-controller="senderController" data-ng-click="sendClick()">Click</button>

你可以看到它在小提琴上演奏。

使用从一个公共控制器继承的两个不同控制器。尽管在我看来，在这种情况下使用指令更好。

controller inheritance:
var app = angular.module('inheritance', []);
app.controller('ParentCtrl ', function($scope) {
});
app.controller('ChildCtrl', function($scope, $controller) {
  $controller('ParentCtrl', {$scope: $scope});
});
相关文章：