Question

我是angularJS的新手。我已经完成了phone-cat tutorial官方角度文件。我正在尝试为它创建一些新功能，例如（创建一个新项目，编辑...）假设我为此创建了api。

应用/电话创建/电话create.module.js

angular.module('phoneCreate', ['core.phone'])

应用/电话创建/电话create.component.js

angular.module('phoneCreate')
    .component('phoneCreate', {
        templateUrl: 'phone-create/phone-create.template.html',
        controller: ['Phone', '$scope',
            function PhoneCreateController(Phone, $scope) {
                var self = this;

                var data = {
                    name: $scope.name,
                    description: $scope.description,
                    kind: $scope.kind
                }

                self.create = function () {
                    console.log(data); // {name : underfined , desciprion : underfined , kind : underfined}
                }
            }

        ]
    });

应用/电话创建/电话create.template.html

<div class="row">
    <div class="form-horizontal col-md-8">
        <div class="form-group">
            <label class="control-label col-sm-4" for="name">Name</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="description">Description</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="kind">Kind</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
            </div>
        </div>
    </div>
</div>

当我单击Create时，我希望输入中的字段将被控制器中的范围访问，但它是未定义的。我不知道为什么以及如何修复。请帮帮我！

Answer 1

让我们来看看这三行：

<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">

<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">

<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">

他们有ng模型：$ctrl.name，$ctrl.description，$ctrl.kind。您的组件未声明这些变量。

将其更改为$ctrl.data.name，$ctrl.data.description，$ctrl.data.kind并修改您的组件：

angular.module('phoneCreate')
.component('phoneCreate', {
    templateUrl: 'phone-create/phone-create.template.html',
    controller: ['Phone', '$scope',
        function PhoneCreateController(Phone, $scope) {
            var self = this;

            self.data = {
                name: "",
                description: "",
                kind: ""
            };

            self.create = function () {
                console.log(self.data);
            };
        }

    ]
});

Answer 2

选项1：

angular.module('phoneCreate')
    .component('phoneCreate', {
        templateUrl: 'phone-create/phone-create.template.html',
        controller: ['Phone', '$scope',
            function PhoneCreateController(Phone, $scope) {
                var self = this;

                self.create = function () {
                    console.log(self.name); // {name : underfined , desciprion : underfined , kind : underfined}
                }
            }

        ]
    });

选项2：

angular.module('phoneCreate')
    .component('phoneCreate', {
        templateUrl: 'phone-create/phone-create.template.html',
        controller: ['Phone', '$scope',
            function PhoneCreateController(Phone, $scope) {
                var self = this;

                // No need to initialise self.data
                self.data = {
                    name: '',
                    description: '',
                    kind: ''
                }

                self.create = function () {
                    console.log(self.data);
                    console.log(self.data.name);
                }
            }

        ]
    });

HTML：

<div class="row">
    <div class="form-horizontal col-md-8">
        <div class="form-group">
            <label class="control-label col-sm-4" for="name">Name</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.data.name" class="form-control" id="name" placeholder="Name">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="description">Description</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.data.description" class="form-control" id="description" placeholder="description">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="kind">Kind</label>
            <div class="col-sm-8">
                <input type="text" ng-model="$ctrl.data.kind" class="form-control" id="kind" placeholder="Kind">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
            </div>
        </div>
    </div>
</div>

为什么我的$范围不起作用？

2 个答案: