私はAngularJSを初めて使用しています。私は自分のコードに間違いを感じません。多くのバリエーションを試しましたが、たびに間違った結果が得られます。nullのプロパティ 'join'を読み取ることができません
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>acronyms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fredericka the Great">
</head>
<body>
<div class="container-fluid col-sm-4">
<h1>Something</h1>
<form role="form">
<div class="form-group">
<input name="userInput" id="userInput" class="form-control input-normal" placeholder="Enter Text Here" ng-model="userInput">
<br>
</div>
<div>The acronym for "{{userInput}}" is <span main-directive id="result" ng-bind="acronymOutput"></span></div>
</form>
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.directive("mainDirective", function(){
var inputValue = document.getElementById("userInput").value;
var matches = inputValue.match(/\b(\w)/g);
var acronymOutput = matches.join("").toUpperCase();
document.getElementById("result").innerHTML = acronymOutput;
document.getElementById("userInput").value = ("");
return {
template: ("<h1>" + acronymOutput + "</h1>")
};
})
ええ、あなたが適切にディレクティブを作成していません。 Angular JSのドキュメントには、ディレクティブに関する広範な情報があります。 –
ドキュメントを読む、ディレクティブを修正する、コードを修正する –