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';
    ...

为什么$scope.data.model在呈现HTML页面时不显示 hello ？相反它没有显示任何内容，当我最终在输入字段中输入内容时，它会更新$scope.data.model。

Answer 1

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

Answer 2

实际上'控制器为'语法非常有用且易于理解。我希望保留它，因为您可以根据需要隔离数据并以更清洁的方式使用它。

您的代码存在的问题是您必须将数据对象绑定到此，而不是 $ 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 Style Guide

AngularJS双向绑定

2 个答案: