Question

我在理解范围继承方面遇到了很多麻烦，我已经尽力将数据对象从父控制器传递到子控制器，但我似乎无法让事情发挥作用。有人可以解释为什么这不起作用？谢谢！

编辑：我之前没有详细说明，但这是使用John Papa风格指南的项目要求，所以我无法使用$scope解决此问题控制器。

更新：我似乎误解了使用this的目的...基于以下海报的帮助，我现在明白某些行动需要使用$scope和John Papa的样式指南只是要求开发人员在适当时使用this以避免范围冲突，而不是作为范围的替换

JS

//parent.controller.js
(function () {
    'use strict';

    angular
        .module('app')
        .controller('ParentController', ParentController);

    ParentController.$inject = ['$scope'];

    function ParentController($scope) {
        var vm = this;
        console.log(this);
        vm.test = {};
        vm.test.label = "This is being set in the parent controller.";
    }
})();

//child.controller.js
(function () {
    'use strict';

    angular
        .module('app')
        .controller('ChildController', ChildController);

    ChildController.$inject = ['$scope'];

    function ChildController($scope) {
        var vm = this;
        vm.test = vm.test;
    }
})();

HTML

<div ng-controller="ParentController as vm">
     <div>PARENT: {{vm.test.label}}</div>
     <div ng-controller="ChildController as vm">
          <div>CHILD: {{vm.test.label}}</div>
     </div>
</div>

RESULT

PARENT: 'This is being set in the parent controller.'
CHILD:

Answer 1

问题是：vm也是$ scope本身的一部分。所以你不能把这个实例用于Parent＆amp;儿童控制器。否则您在使用它们时将面临问题。如果要将此实例与Parent＆amp;孩子然后给出不同的名字。由于vm也是控制器的一部分，所以如果你想在Child控制器中访问Parent的vm，你就必须$scope.vm

根据您的要求的工作代码如下：

Controller
---------
(function () {
                'use strict';

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

    ParentController.$inject = ['$scope'];

    function ParentController($scope) {
        var vm = this;
        console.log(this);
        vm.test = {};
        vm.test.label = "This is being set in the parent controller.";
    }
})();

(function () {
    'use strict';

    angular
        .module('app')
        .controller('ChildController', ChildController);

    ChildController.$inject = ['$scope'];

    function ChildController($scope) {
        var childVm = this;
        childVm.test = $scope.vm.test;
    }
})();


HTML
---

<div ng-app="app">
            <div ng-controller="ParentController as vm">
                <div>PARENT: {{vm.test.label}}</div>
                <div ng-controller="ChildController as childVm">
                    <div>CHILD: {{childVm.test.label}}</div>
                </div>
            </div>
        </div>

干杯！

Answer 2

检查了plnkr后，希望我能够理解你的问题，并根据它给出答案：

在控制器文件中，用于ChildController

chrome.contextMenus.create({
    id: 'hello',
    title: 'Hello',
    contexts: ['editable']
}, function() {
    var ignoreErrors = chrome.runtime.lastError;
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId == 'hello') {
        console.log('Hello');
    }
});

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    chrome.contextMenus.update('hello', {contexts: [msg]});
});

分配parentCtrl.test，没有任何意义，因为它是父控制器的对象。
this.parentCtrl.test将被评估为childCtrl.parentCtrl.test，这是无效的。

以下工作是因为 -

var childCtrl = this;

// Why don't either of these work?
// childCtrl.test = parentCtrl.test;
// childCtrl.test = this.parentCtrl.test;

代码执行期间

将为ParentController和ChildController创建两个单独的范围。
child将继承parent的属性，那些在childController中不存在的属性将被分配给childController范围。由此您可以在具有范围的儿童中获得价值。

子控制器不从父控制器继承

2 个答案: