角的ui。路由器,从子控制器调用父控制器函数?

时间:2021-11-06 12:55:56

I'm using Angular with ui.router and have setup a nested view. The parent view has a div whose visibility I can toggle through a function on the parent controller. I'd like to call this function from the child controller of the nested view. How would I do this?

我用角表示ui。并设置一个嵌套视图。父视图有一个div,它的可视性可以通过父控制器上的函数进行切换。我想从嵌套视图的子控制器调用这个函数。我该怎么做呢?

1 个解决方案

#1


12  

http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview

http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview

JS

JS

angular
    .module("myApp", [])

    .controller("parent", function($scope) {
        $scope.parentFunction = function() {
            alert("Called a function on the parent")
        };
    })

    .controller("child", function($scope) {
        $scope.childFunction = function() {
            alert("Called a function on the child")
        };

        $scope.parentFromChild = function() {
            alert("I know this feels weird");
            $scope.parentFunction();
        };
    })

HTML

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="parent">
      <div ng-controller="child">
        <a href="#" ng-click="parentFunction()">Call Parent</a>
        <a href="#" ng-click="childFunction()">Call Child</a>
        <a href="#" ng-click="parentFromChild()">Call Parent from Child</a>
      </div>
    </div>
  </body>

</html>

The scope on controllers is prototypically inherited I believe which means if you don't redefine a function on the scope you get the same function from the parent scope if you call it (the problem is this then makes the assumption about the context of the use of this controller though it's debatable if this is really an issue assuming you don't depend on some effect from that controller in this controller).

控制器上的范围与原型继承我相信这意味着如果你不重新定义一个函数的范围从父母得到相同的功能范围,如果你叫它(这个问题是使假设的背景下使用这个控制器即使有争议的是,这确实是一个问题如果你不依赖于一些影响从控制器在这个控制器)。

#1


12  

http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview

http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview

JS

JS

angular
    .module("myApp", [])

    .controller("parent", function($scope) {
        $scope.parentFunction = function() {
            alert("Called a function on the parent")
        };
    })

    .controller("child", function($scope) {
        $scope.childFunction = function() {
            alert("Called a function on the child")
        };

        $scope.parentFromChild = function() {
            alert("I know this feels weird");
            $scope.parentFunction();
        };
    })

HTML

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="parent">
      <div ng-controller="child">
        <a href="#" ng-click="parentFunction()">Call Parent</a>
        <a href="#" ng-click="childFunction()">Call Child</a>
        <a href="#" ng-click="parentFromChild()">Call Parent from Child</a>
      </div>
    </div>
  </body>

</html>

The scope on controllers is prototypically inherited I believe which means if you don't redefine a function on the scope you get the same function from the parent scope if you call it (the problem is this then makes the assumption about the context of the use of this controller though it's debatable if this is really an issue assuming you don't depend on some effect from that controller in this controller).

控制器上的范围与原型继承我相信这意味着如果你不重新定义一个函数的范围从父母得到相同的功能范围,如果你叫它(这个问题是使假设的背景下使用这个控制器即使有争议的是,这确实是一个问题如果你不依赖于一些影响从控制器在这个控制器)。