Javascript 在angular js中从另一个控制器调用另一个函数

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

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
});

---

有没有办法调用该方法？

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

或者更好的是，使用服务“托管”您的功能。

---

您可以在我的回答中阅读更多关于服务的内容，例如我使用变量，但您可以对函数调用执行相同的操作

第一种方式：使用服务 服务是单例的，您可以通过服务传递数据。例如，让我们调用我们的服务

dataservice

：

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

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

您可以从第二个控制器获取以下数据：

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

function SecondController(dataservice) {
  let dataFromFirstController = dataservice.dataToPass;
}

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

function FirstController($scope) {
  $scope.$broadcast('passDataFromParentToChild', 'Data from FirstController');
}

第二种方式：使用$emit/$broadcast（仅当控制器是父控制器和子控制器时） 您可以通过

$emit

向上传递数据或通过

$broadcast

向下传递数据（$emit和$broadcast的工作原理类似，我将仅用$broadcast展示示例）。如果

FirstController

是父控制器，而

SecondController

是子控制器，则可以通过它们传递数据，如下所示：

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

function SecondController(dataservice) {
  let dataFromFirstController = dataservice.dataToPass;
}

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

function FirstController($scope) {
  $scope.$broadcast('passDataFromParentToChild', 'Data from FirstController');
}

并在

SecondController

中获取数据：

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$on('passDataFromParentToChild', function (event, data) {
    console.log(data); // will be "Data from FirstController"
  });
}

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

function FirstController($scope) {
  $scope.varFromParentController = 'First';
}

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$parent.varFromParentController = 'Second';
}

第三种方式：使用$scope.$parent（仅当控制器是父控制器和子控制器时） 如果要从子控制器更改父控制器的变量，下面是最简单的方法（假设

FirstController

是

SecondController

的父控制器）：

让我们从

SecondController

更改

$scope.varFromParentController

：

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$on('passDataFromParentToChild', function (event, data) {
    console.log(data); // will be "Data from FirstController"
  });
}

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

function FirstController($scope) {
  $scope.varFromParentController = 'First';
}

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$parent.varFromParentController = 'Second';
}

大约$rootScope

---

您也可以使用

$rootScope

，但这是一种不好的做法，最好选择上述方法之一。

在中实现应用程序的逻辑

要更新作用域并使作用域变量与服务字段保持同步，可以执行以下操作

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
    });
});

控制器应该是。这意味着你的应用程序不应该有任何实际的逻辑。仅在更新作用域时使用控制器。这样做，您将获得干净、结构良好、可读且易于重用的代码

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

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

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

});

2$范围。$watch

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

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

---

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

使用角度广播，并在另一个角度捕获广播controller@Kaushikitem_detail controller是controller mini_cart的子项吗？如果是，它们之间有多少个控制器？