如何在 angularjs 1.5 中访问父组件答案

【问题标题】：How to access parent component in angularjs 1.5如何在 angularjs 1.5 中访问父组件
【发布时间】：2016-12-15 11:49:25
【问题描述】：

您好，我正在尝试在 angularjs 中显示简单的组件，其中孩子需要访问父名称。我的代码如下所示：

HTML 文件：

<html>
<head>
    <script type='text/javascript' src='angular.min-1.5.0.js'></script>
    <script type='text/javascript' src='app.js'></script>
</head>
<body ng-app="componentApp">
    <div ng-controller="helloCnt"> 
        <hello name="Parent"></hello>
        <hello1 name="Child"></hello1>  
        <label>List: <input name="namesInput" ng-model="names" ng-list=" | "   required></label>
    </div>
</body>
</html>

代码：

app.component('hello', {
        transclude: true,
        template:'<p>Hello I am {{$ctrl.name}} and ctrl name is {{myName}}</p>',
        bindings: { name: '@' },
        controller: function($scope) {
                        $scope.myName = 'Alain';
                        alert(1);
        }
});

app.component('hello1', {
        require: {
            parent: 'hello'
        },
        template:'<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}} </p>',
        bindings: { name: '@' },
        controller: function($scope) {
                        $scope.myNameFromParent=this.parent.myName;
                        alert(2);
        }
});

它会抛出一个错误：

TypeError: Cannot read property 'myName' of undefined

我无法弄清楚代码中有什么问题以及为什么它找不到父级。关于我所犯错误的任何输入。似乎是我可能错过的一个小错误。

【问题讨论】：

hello 和 hello1 是同级作用域，检查一下！
我认为您的组件结构有问题。组件应该对父组件一无所知。这是组件设计的最佳实践。

标签： angularjs components angular-components

【解决方案1】：

用require继承，组件需要嵌套：

<hello name="Parent"></hello>
<hello1 name="Child"></hello1>

改为

<hello name="Parent">
    <hello1 name="Child"></hello1>
</hello>

然后你可以像这样要求父母：

require: {
    parent: '^^hello'
  },

【讨论】：

hi.你能否解释一下在 require 属性中继承父级时使用 '^' 和 '^^' 有什么区别？
@AmbarBhatnagar 使用 ^ 访问父级和本地控制器，而 ^^ 只是父级。
@不太明白。

【解决方案2】：

其实我在用@gyc指出的答案进行以下修改后得到了答案：

JS代码：

angular
    .module('componentApp', [])
    .controller('helloCtrl', function ($scope) {
        $scope.names = ['morpheus', 'neo', 'trinity'];
    })
    .component('hello', {
        transclude: true,
        template: '<p>Hello I am {{parentCtrl.name}} and my name is {{parentCtrl.myName}}</p><ng-transclude></ng-transclude>',
        controllerAs: 'parentCtrl',
        controller: function ($scope) {
            this.myName = 'Braid';
        },
        bindings: {
            name: '@'
        }
    })
    .component('hello1', {
        template: '<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}}  </p>',
        controller: function ($scope) {
            this.$onInit = function () {
                $scope.myNameFromParent = this.parent.myName;
            };

        },
        bindings: {
            name: '@'
        },
        require: {
            parent: '^hello'
        }
    });

HTML：

<html>
<body ng-app="componentApp">
    <div ng-controller="helloCtrl">
        <hello name="Parent">
            <hello1 name="Child"></hello1>
        </hello>
        <label>List:
            <input name="namesInput" ng-model="names" ng-list=" | " required>
        </label>
    </div>
</body>
</html>

我这样做的常见错误是没有遵循嵌套组件格式并且没有在我的父级中使用 transclude。当我进行这两项更改并修改我的后续代码时，其余的工作正常。

P.S - HTML 中包含的 ng-list 与组件无关。那是为了其他目的。

@gyc - 感谢您的帮助。您的意见有所帮助。

@daan.desmedt - 我希望在组件而不是指令中找到解决方案。

【讨论】：