2016-07-04 9 views
0

私は最初に依存性注入を行っています。私の目標は、最終的には2つのコントローラ間の単純な通信を可能にすることです。私は、第2のコントローラとの通信を扱うことさえ心配するほどではない。 ContactMessages.AddNewContact(response.data)の "関数エラーではありません"が表示されます。Angularjs:依存性注入。 "関数ではありません"エラー

私はself.ContactMessages.AddNewContact(response.data)を使用します。私は "プロパティを読み取ることができません '未定義のAddNewContact'

私は、ContactMessagesファクトリのAddNewContact関数を呼び出すだけです。

これはかなり基本的な手順です。

<html ng-app="myApp"><head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
<script> 
var userName = 'some email'; //pseudo code 
var app = angular.module('myApp', []); 

app.factory('ContactMessages', [function() 
{ var tmpContact = {}; 

    this.AddNewContact = function(objContact){ 
     this.tmpContact = objContact; 
    }; 
    return tmpContact; 
}]); 

app.controller('ActionsController', function ($scope, $http, ContactMessages){ 
     this.newContact = { 
      Email: "", 
      Type: "", 
      Frequency: "", 
      UserName: userName 
     }; 
     var self = this; 

     this.AddContact=function() 
     { 

      $http({ 
      method: 'POST', 
      url: 'some url', //pseudo code 
      data: this.newContact, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
      }).then(function successCallback(response) 
       { if(angular.isObject(response.data)) 
         self.ContactMessages.AddNewContact(response.data); 
       }, function errorCallback(response) { 

      }); 
     }; 
    }); 
</script> 
</head> 

<body ng-controller="ActionsController as ActCtrl"> 
<div> 
    <form name="frmAddContact" noValidate> 
     <input placeholder="Contact Email" type="email" ng-model="ActCtrl.newContact.Email" required></input> 
     <select ng-model="ActCtrl.newContact.Type" required> 
      <option value="">Contact Type</option> 
      <option value="COLLEAGUE">Colleague</option> 
      <option value="FRIEND">Friend</option> 
      <option value="FAMILY">Family</option> 
     </select> 
     <select ng-model="ActCtrl.newContact.Frequency" required> 
      <option value="">Contact Frequency</option> 
      <option value="ANY">Any Time</option> 
      <option value="WEEKLY">Weekly</option> 
      <option value="MONTHLY">Monthly</option> 
      <option value="QUARTERLY">Quarterly</option> 
      <option value="YEARLY">Yearly</option> 
     </select> 
     <div > 
      <button ng-click="ActCtrl.AddContact()" ng-disabled="frmAddContact.$invalid" >Add Contact</button> 
     </div> 
    </form> 
</div></body></html> 
+0

ため、この

app.factory('ContactMessages', [ function() { var o = {}; o.AddNewContact = {}; return o; } ]); 

のようなあなたの工場を変更私は、$ HTTPリクエストの中からContactMessages.AddNewContactを呼び出すことができないことに問題を分離しました。 AddContactの中から関数を呼び出すことができます。 –

答えて

1
+0

提案通りの変更を加えました。以前と同じエラーメッセージが表示されます。 –

+0

var self = this;あなたはthis.newContactを移動する前にthis.AddContact = function()の内部ではなく、上に移動する必要があります。var self = this; –