Angular ng-bindがコントローラに接続されないのはなぜですか？

私はAngular.jsを学んでいます。私はformを作りたいと思っています。ユーザーは出力を見ることができます。ここでAngular ng-bindがコントローラに接続されないのはなぜですか？

が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

スクリプトでの初期化されているコントローラ
の外にNG-バインドを使用しています

以下は固定コードです。

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

を修正バージョン：必要な最小のコードを削減し、より多くの質問をするためにいくつかのコメントを追加

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がコントローラに接続されないのはなぜですか？

答えて

関連する問題