无法从包含ng的控制器访问$ parent

时间:2015-06-05 15:53:34

标签: angularjs angularjs-scope angularjs-ng-include

我对Angular很新,我正在尝试构建一个应用程序。

我使用ng-include插入我的视图,具体取决于我的主控制器的currentURL变量。 当我尝试通过 ng-included 文件中的$parent访问主控制器时,我得到的只是undefined

我的目标是更改currentURL变量以更新视图。

这是我的代码:

的index.html

<body ng-controller="mainCtrl as main">
    currentURL : {{main.currentURL}}
    <div ng-include="main.currentURL"></div>

    <script src="/vendors/angular.min.js"></script>
    <script src="/modules/login.js"></script>
    <script src="app.js"></script>
</body>

app.js

angular
    .module('mcaApp', ['login'])
    .controller('mainCtrl', mainCtrl);

function mainCtrl() {
    var vm = this,
        baseURL = 'views/';
    vm.currentURL = baseURL + 'login.html';
}

视图/ login.html的

<div ng-controller="loginCtrl as login">
    <h1>LOGIN</h1>
</div>

模块/ login.js

angular
    .module('login', [])
    .controller('loginCtrl', loginCtrl);

function loginCtrl() {
    var vm = this;

    console.log(vm.$parent); // undefined
}

1 个答案:

答案 0 :(得分:3)

如果您想访问位于mainCtrl控制器内的loginCtrl,则需要使用$parent来访问父控制器范围。

但问题是你正在使用loginCtrl加载ng-include控制器视图,因此你的控制器被加载到mainCtrl的子范围内,因为ng-include创建了一个子范围从目前的范围。

因此,您需要使用$parent.$parentmainCtrl

访问loginCtrl范围

<强>代码

function loginCtrl($scope) {
    var vm = this;

    console.log($scope.$parent.$parent); // this would contain mainCtrl
}

更好的方法是在定义对象时使用controllerAs语法或遵循点规则,以便遵循原型继承。