AngularJS双向绑定

Question

我在 AngularJS 中遇到双向绑定问题。在我的 HTML 中，我有：

<div class="row" ng-app="creation">
    <form class="form-horizontal" ng-controller="CreationController as cCtrl" ng-submit="cCtrl.send()" novalidate>
        <div class="form-group">
            <label class="col-sm-4">Model</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" ng-model="cCtrl['data']['model']" id="model" />
            </div>
        </div>
    ...

在JavaScript这边，我有：

(function() {
    var app = angular.module('creation', ['validation', 'link']);

    app.controller('CreationController', ['$scope', function($scope) {
        $scope.data = {};
        $scope.data.model = 'hello';
    ...

为什么在渲染HTML页面时$scope.data.model不显示hello？相反，它什么都不显示，当我最终在输入字段中输入内容时，它会更新 $scope.data.model.

Answer 1

这是因为您在 $scope 上设置了数据模型，但在您的 html 中，您在 cCtrl 下引用了一个控制器实例。尝试在 html 中使用 ng-model=data.model。

Answer 2

实际上，“Controller as”语法非常有用且易于理解。我宁愿保留它，因为您可以根据需要隔离数据并以更清晰的方式使用它。

您的代码存在问题，您必须将 data object 绑定到 this，而不是 $scope

(function() {
var app = angular.module('creation', ['validation', 'link']);

app.controller('CreationController', [function() {
    // You can use an object to refer to *this* (vm stands for 'ViewModel').
    var vm = this;
    vm.data = {};
    vm.data.model = 'hello';
    // or just have vm.data = {model: 'hello'};
...

然后像使用它一样在模板中使用它。

除此之外，您没有注入 $scope** 除非您想使用 angular 中的特定内容，例如 digest 或 watch，或继承自parent scopes/parent 控制器。

这里还有一个很好的 angular 风格指南，它还解释了其他概念：Angular Style Guide

AngularJS双向绑定

AngularJS two-way binding

javascript

dom-events

angularjs

angularjs-scope