问题 Angular ui.router，从子控制器调用父控制器功能？

我正在使用Angular和ui.router并设置了一个嵌套视图。父视图有一个div，其可见性我可以切换父控制器上的一个函数。我想从嵌套视图的子控制器中调用此函数。我该怎么办？

11954

2018-03-18 13:23

起源

答案:

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

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

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

控制器上的作用域是原型继承的，我相信这意味着如果你不重新定义作用域上的函数，你可以从父作用域获得相同的函数（问题是这样就会对使用的上下文做出假设）虽然这是一个值得商榷的问题，但如果这确实是一个问题，假设你不依赖于该控制器中该控制器的某些影响）。

2018-03-18 13:34

如果控制器定义如此，这仍然有用吗？： angular.module("myApp", []).controller("parent", function($scope){ //Code here }); 在一个单独的文件中： angular.module("myApp", []).controller("child", function($scope){ //Code here }); - phabtar

phabtar，你写的几乎可以工作。在angular中，模块调用有两个变体，如果你提供一个数组作为第二个arg它假设你正在尝试创建这个模块，如果你排除像angular.module（“myApp”）那样的数组，它将只获得现有模块和您可以添加内容，这里唯一需要注意的是文件需要以正确的顺序加载，因此首先使用依赖项定义文件。通常，我为每个文件保留一个模块，并在一个模块/文件中有一个服务和一些相关的控制器。 - shaunhusain

如果孩子是具有隔离范围的指令，则需要将其更改为 ng-click="$parent.parentFunction()" - Craig

答案:

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

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

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

2018-03-18 13:34

如果孩子是具有隔离范围的指令，则需要将其更改为 ng-click="$parent.parentFunction()" - Craig

问题 Angular ui.router，从子控制器调用父控制器功能？

答案:

答案:

热门问题