Почему этот Angular ng-bind не привязывается к ng-контроллеру?

Я учу Angular.js. Я хочу сделать form, где пользователь может видеть вывод, который они заполняют.Почему этот Angular ng-bind не привязывается к ng-контроллеру?

Вот test.html:

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script> 
<script src="test.js"></script> 
</head> 
<body ng-app="charter"> 
    <div id="layout-wrapper" ng-controller="graphicLanguageCTRL"> 
     <form id="graphic-language" ng-controller="graphicLanguageCTRL" novalidate> 
      <h3>Language</h3> 
      <input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br> 
     </form> 
    </div> 
    <h1 class="graphic-title" ng-bind="graphic.hed"></h1> 
</body>

Вот test.js:

var app= angular.module("charter",[]); 
app.controller("graphicLanguageCTRL",function($scope){ 
    $scope.master= { 
     hed: '' 
    }; 
});

Я хочу, чтобы материал набран в input тег, чтобы быть видимым в h1 тега. Но когда я набираю тег input, в теге h1 ничего не отображается.

Как исправить это?

источник

2016-12-10 Username

Есть некоторые ошибки в коде:

Вы используете нг-привязку вне контроллера
Вы инициализация graphicLanguageCTRL дважды
В вашем сценарии вы устанавливаете неправильное имя переменной

Ниже фиксированный код:

HTML

<body ng-app="charter"> 
    <div id="layout-wrapper" ng-controller="graphicLanguageCTRL"> 
    <form id="graphic-language" novalidate> 
     <h3>Language</h3> 
     <input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br> 
    </form> 
    <h1 class="graphic-title" ng-bind="graphic.hed"></h1> 
    </div> 
</body>

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

app.controller("graphicLanguageCTRL", function($scope){ 
    $scope.graphic = { 
    hed : '' 
    }; 
});

источник

2016-12-10 00:17:40

var app = angular.module("charter",[]); 
app.controller("graphicLanguageCTRL",function($scope){ 
    $scope.graphic = { 
     hed: '' 
    }; 
});

или

var app = angular.module("charter",[]); 
app.controller("graphicLanguageCTRL",function($scope){ 
    $scope.graphic = {}; 
    $scope.graphic.head = '' 
});

источник

2016-12-10 00:22:35

Снизить код до минимума, необходимого и добавить некоторые комментарии, чтобы сделать вопрос более полезно. – Christoph

2 вещи необходимо позаботиться о:

Не гнездо и использовать тот же ng-controller
Перемещение h1 внутри ng-controller блок

Fixed версия:

var app = angular.module('charter', []); 
 
app.controller("graphicLanguageCTRL", function($scope) { 
 
    $scope.graphic = { 
 
    hed: '' 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>test</title> 
 
    </head> 
 
    <body ng-app='charter'> 
 
    <div id="layout-wrapper" ng-controller="graphicLanguageCTRL"> 
 
    <form id="graphic-language" novalidate> 
 
     <h3>Language</h3> 
 
     <input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> 
 
     <br> 
 
    </form> 
 
    <h1 class="graphic-title" ng-bind="graphic.hed"></h1> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-12-10 00:26:06

Почему этот Angular ng-bind не привязывается к ng-контроллеру?

ответ

Смежные вопросы