AngularJS（1.5.5 版本）如何使用 ng-model 从父组件中获取数据？

Question

下面是我的代码输出的图像；我知道如何显示从父组件传递下来的数据（即 100），但我不知道如何通过 ng-model 显示父组件的数据（即 100 未显示在文本框中）

这是我的 HTML 和 AngularJS 代码：

var app = angular.module('app', []);

app.component('parentComponent', {
    controller: 'parentController'
})
.controller( 'parentController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 100 };
})

app.component('childComponent', { // CHILD COMPONENT
    bindings: { displayFirst: '=' },
    template: `<div><label>Parent Value: </label>
                 <input type="text" ng-model="$ctrl.object.first">
               </div>`,
    controller: 'childController'
})
.controller('childController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 25 };
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body>
    <div ng-app="app">
        <div ng-controller="parentController as parent">
            <div ng-controller="childController">
                <child-component displayFirst="parent.object.first">
                </child-component>
                {{ parent.object.first }}
            </div>
        </div>
    </div>
</body>

Answer 1

在HTML中，属性绑定需要在kebab-case:

<div ng-controller="childController">
    ̶<̶c̶h̶i̶l̶d̶-̶c̶o̶m̶p̶o̶n̶e̶n̶t̶ ̶d̶i̶s̶p̶l̶a̶y̶F̶i̶r̶s̶t̶=̶"̶p̶a̶r̶e̶n̶t̶.̶o̶b̶j̶e̶c̶t̶.̶f̶i̶r̶s̶t̶"̶>̶
    <child-component display-first="parent.object.first">
    </child-component>
    {{ parent.object.first }}
</div>

子组件需要使用camelCase中的绑定：

app.component('childComponent', { // CHILD COMPONENT
    bindings: {
        displayFirst: '='
    },
    template: `
       <div>
         <label>Parent Value: </label>
         ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶t̶e̶x̶t̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶$̶c̶t̶r̶l̶.̶o̶b̶j̶e̶c̶t̶.̶f̶i̶r̶s̶t̶"̶>̶
         <input type="text" ng-model="$ctrl.displayFirst">
       </div>
    `,
    controller: 'childController'
})

AngularJS 组件使用隔离作用域。它们不从父作用域继承属性。所有父作用域数据都必须通过绑定。

演示

var app = angular.module('app', []);

app.component('parentComponent', {
    controller: 'parentController'
})
.controller( 'parentController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 100 };
})

app.component('childComponent', { // CHILD COMPONENT
    bindings: { displayFirst: '=' },
    template: `<div><label>Parent Value: </label>
                 <input type="text" ng-model="$ctrl.displayFirst">
               </div>`,
    controller: 'childController'
})
.controller('childController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 25 };
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body>
    <div ng-app="app">
        <div ng-controller="parentController as parent">
            <div ng-controller="childController">
                <child-component display-first="parent.object.first">
                </child-component>
                {{ parent.object.first }}
            </div>
        </div>
    </div>
</body>

AngularJS（1.5.5 版本）如何使用 ng-model 从父组件中获取数据？

How do you use ng-model to take in data from a parent component in AngularJS (version 1.5.5)?

html

javascript

angularjs

angularjs-ng-model

angularjs-components

演示