从角度js中的另一个控制器调用另一个函数

Question

我想调用另一个获得响应的控制器中的函数

var app = angular.module('myApp', []);
app.controller('mini_cart', function($scope, $http) {   
  $scope.update = function() {
    alert("Updated");
  }
  $scope.update();
});

我想在此控制器上调用此更新方法

app.controller('item_detail', function($scope, $http) {
  $scope.update(); //But this is not working
});

如果可以调用该方法，有什么办法吗？

Answer 1

在我的回答中，我使用变量作为示例，但您可以使用函数调用执行相同的操作。

第一种方式：使用服务

服务是单身，您可以通过服务传递数据。例如，让我们调用我们的服务private async void button_Click(object sender, RoutedEventArgs e) { await Task.Delay(5000); // await a heavy operation executed in background label.Content = "Done"; // control back to the UI Thread that executes this } ：

dataservice

你可以从第二个控制器获取这样的数据：

angular
  .module('app')
  .controller('FirstController', ['dataservice']);

function FirstController(dataservice) {
  dataservice.dataToPass = 'data to pass through controllers';
}

第二种方式：使用$ emit / $ broadcast（仅当控制器是父节点和子节点时）

您可以通过angular .module('app') .controller('SecondController', ['dataservice']); function SecondController(dataservice) { let dataFromFirstController = dataservice.dataToPass; } 或向下通过$emit传递向上数据（$ emit和$ broadcast类似，我会展示例子只有$ broadcast）。如果$broadcast是父级，而FirstController是子级，则可以通过它们传递数据：

SecondController

获取angular .module('app') .controller('FirstController', ['$scope']); function FirstController($scope) { $scope.$broadcast('passDataFromParentToChild', 'Data from FirstController'); } 中的数据：

SecondController

第三种方式：使用$ scope。$ parent（仅当控制器是父节点和子节点时）

如果要从子控制器更改父控制器的变量，这是最简单的方法（假设angular .module('app') .controller('SecondController', ['$scope']); function SecondController($scope) { $scope.$on('passDataFromParentToChild', function (event, data) { console.log(data); // will be "Data from FirstController" }); } 是FirstController的父级）：

SecondController

让我们从angular .module('app') .controller('FirstController', ['$scope']); function FirstController($scope) { $scope.varFromParentController = 'First'; } 更改$scope.varFromParentController：

SecondController

关于$ rootScope

你也可以使用angular .module('app') .controller('SecondController', ['$scope']); function SecondController($scope) { $scope.$parent.varFromParentController = 'Second'; } ，但这是一种不好的做法，最好选择上述方法之一。

Answer 2

您可以使用通过您的应用共享的$ rootScope ...

或者更好的是，使用服务来“托管”您的功能 您可以阅读有关服务Here

的更多信息

Answer 3

在services中实施应用的逻辑。

更新范围并使范围变量与您可以执行的服务字段保持同步。

<强> 1。观察员服务（推荐）

为观察员处理创建服务。

app.service("observerService", function () {

    var observerCbFns = [];

    //Registers an oberserver function.
    function registerObserverFn(observerCbFn) {
        observerFns.push(observerCbFn);
    }

    //Call this to inform your observers.
    function notifyObservers() {
        observerCbFns.forEach(function (fn) {
            fn && fn();
        });
    }

    return {
        observer: {register: registerObserverFn, notify: notifyObservers}
    };
});

现在您可以使用observerService扩展所有服务。

app.service("myService", function (observerService) {

    var parent = angular.extend({},observerService);

    var myValue;

    function setValue(value){
        myValue = value;
        parent.observer.notify(); //Notify each observer that myValue changed
    }

    function getValue(){
        return myValue;
    }

    return angular.extend(parent,{
        setValue: setValue,
        getValue: getValue
    });
});

控制器应为thin。这意味着应用程序的实际逻辑应该没有。仅使用控制器更新范围。这样做，您将获得结构清晰，结构清晰，易于重复使用的代码。

app.controller('mini_cart',function($scope,$http,myService){

    function init(){
        myService.observer.register(updateScope);
    }
    init();

    function updateScope(){
        $scope.myValue = myService.myValue;
        alert("Updated");
    }

});

<强> 2。 $范围。$观看

您还可以使用以下代码根据服务字段更新范围变量。

$scope.$watch(myService.getValue,function(){
    $scope.myValue = myService.getValue();
});

但这会对性能产生影响，因为更频繁地调用摘要周期。如果可能，我建议 1。。