2016-07-26 18 views
-1

私は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>") 
      }; 
     }) 
+0

ええ、あなたが適切にディレクティブを作成していません。 Angular JSのドキュメントには、ディレクティブに関する広範な情報があります。 –

+0

ドキュメントを読む、ディレクティブを修正する、コードを修正する –

答えて

1

+0

'require'属性を使ってディレクティブにモデルを渡すことができます –

0

regと一致した後でvar matchesをチェックしてください。 expr。

var matches = inputValue.match(/\b(\w)/g); 
console.log(matches); // check in console 
var mnemonicOutput=""; 
if(typeof matches == "array") 
{ 
    mnemonicOutput = matches.join("").toUpperCase(); 
} 
+0

全く助けにならない。私はエラーがどこにあるのか分からず、アプリケーションを動作させたい。私はすでにエラーがどこにあるかを知っています。なぜなら、それはヌルであることを指摘しているからです。 @Haresh Vidja –

0

あなたはこのように書くことができますから、あなたの指示やプロセスにそれをそのモデルに合格し、モデルへの入力応答をバインドします。

Array.isArray(matches) && matches.join("").toUpperCase(); 

OR

Object.prototype.toString.call(someVar) === '[object Array]' && matches.join("").toUpperCase(); 
0

あなたは頭字語を作成するために正規表現を使用しようとしていますか? もしそうなら、私は ""で分割して参加することをお勧めします。これにより

var matches = inputValue.match(/\b(\w)/g); 
var mnemonicOutput = matches.join("").toUpperCase(); 

:この2行を置き換え

var matches = inputValue. split(' ').map(function(item){return item[0]}).join(''); 
var mnemonicOutput = matches.toUpperCase(); 
0

あなたが最初に作る間違いはあなたがコントローラ機能への入力値をトリガする必要がある場合directiveを使用することです。 ng-modelに値を渡して処理して戻してください。ここで

var myApp = angular.module("myApp", []); 
    myApp.controller("AcronymController", function($scope) { 
     var vm = this; 

     vm.getAcronym = function() { 
     var matches = vm.userInput.match(/\b(\w)/g); 
     vm.acronymOutput = matches.join("").toUpperCase(); 
     document.getElementById("userInput").value = (""); 
     }; 
    }); 

は作業jsfiddleです: https://jsfiddle.net/9zL5nj8e/1/

関連する問題