AngularJS двусторонняя привязка

Question

AngularJS двусторонняя привязка

0

У меня проблемы с двусторонней привязкой в 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 не отображает привет, когда я $scope.data.model HTML страницу? Вместо этого он ничего не отображает, и когда я, наконец, $scope.data.model что-то в поле ввода, он обновляет $scope.data.model.

Noah Stebbins 06 июль 2015, в 18:05

Источник

Теги:

javascript

angularjs

javascript-events

angularjs-scope

2 ответа

0

На самом деле синтаксис " Контроллер как " может быть очень полезным и простым в использовании. Я бы предпочел сохранить это, потому что вы можете изолировать данные по своему усмотрению и работать с ним более чистым способом.

Проблема с вашим кодом заключается в том, что вам нужно привязать объект данных к этому, а не к $ 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 **, если вы не хотите использовать что-то конкретное из углового, например, дайджест или смотреть, или наследовать от родительских областей/родительских контроллеров.

Вот также хороший справочник по стилю для углового, который объясняет и другие концепции: Руководство по угловому стилю

alexandru.pausan 06 июль 2015, в 15:01

Ещё вопросы

r0dney · Accepted Answer · 2015-07-06T13-48-00.000Z

Это связано с тем, что вы настраиваете модель данных в области $scope но в своем html, на который вы ссылаетесь в cCtrl который является экземпляром контроллера. Попробуйте использовать ng-model=data.model в html.