Angular ui.router,从子控制器调用父控制器功能?

时间:2014-03-18 13:23:16

标签: angularjs angular-ui angular-ui-router angularjs-controller

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

1 个答案:

答案 0 :(得分:12)

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

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

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

控制器上的作用域是原型继承的我认为这意味着如果你不重新定义作用域上的函数,你可以从父作用域获得相同的函数(问题是这样就可以对上下文做出假设)使用这个控制器虽然它是有争议的,如果这真的是一个问题,假设你不依赖于该控制器中该控制器的某些影响)。