1
var app = angular.module("colorIt",[]);
app.controller("ColorCtrl",function() {
this.shape = '';
this.style = {
'border-color': '',
'background-color': '',
'border-width': '',
'border-style': ''
};
});
<!Doctype html>
<html data-ng-app="colorIt">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/app.css">
<link href="https://fonts.googleapis.com/css?family=Niconne|Quicksand:400,700" rel="stylesheet">
<title>Colorit</title>
</head>
<body>
<div id="user">
<h1>Colorit</h1>
<div id="inputs">
<label for="shapes">Shape</label>
<select class="shapes" name="shapes" ng-model="shape">
<option value="">Select Shape</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
</select>
<label for="background-color">Background Color</label>
<input type="color" name="background-color" ng-model="style['background-color']">
<label for="border-style">Border Style</label>
<input type="text" name="border-style" value="solid" ng-model="style['border-style']" placeholder="solid dashed dotted inset">
<label for="border-width">Border Width</label>
<input type="text" name="border-width" value="2px" ng-model="style['border-width']" placeholder="2px 4px 2px 4px">
<label for="border-color">Border Color</label>
<input type="color" name="border-color" ng-model="style['border-color']" ng-init="#000" value="#000000">
<label for="shadow">Box Shadow</label>
<input type="text" name="shadow" ng-model="shadow" value="5px 5px 10px" placeholder="5px 5px 10px">
<label for="shadow-color">Shadow Color</label>
<input type="color" ng-model=color name="shadow-color" value="#000">
</div>
</div>
<div id="display" ng-controller="ColorCtrl as color">
<div ng-class="{{color.shape}}" ng-style="{{color.style}}">
{{color.style['border-color']}},{{color.style['background-color']}},{{color.style['border-width']}}
</div>
</div>
<script src="assets/js/colorit.js" charset="utf-8"></script>
</body>
</html>
コントローラはngモデルの値を格納していません。当初は、このアプリケーションはディレクティブのみを使って構築していましたが、これは動作していましたが、さまざまな入力のデフォルト値を設定する必要があったため、コントローラを使用しています。また、私はbodyタグや使用controllerAsに私のコンソールに角度コントローラがngモデルから値を受信しない
Error: [$parse:lexerr] http://errors.angularjs.org/1.6.0/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%200-0%20%5B%23%5D&p2=%23000
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:6:425
at pc.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:221:149)
at pc.lex (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:218:369)
at r.ast (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:225:175)
at Cd.compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:235:100)
at qc.parse (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:260:332)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:131:115
at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:147:65)
at Object.pre (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:284:350)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:16:71
入力がコントローラスコープ内にありません – charlietfl
構文解析エラーは、ng-initを不適切に使用していることによるものです。それは何も割り当てないので、このユースケースでは 'ng-nit'を使用しないでください。 – charlietfl
エラーメッセージはあなたのモデルの問題とは無関係です。エラーは 'ng-init ="＃000 "と書かれているために起こります。これは構文が無効です。 –