2016-04-08 10 views
-1

が定義されていません。 htmlコールhtmlとスコープ変数からangularjsコントローラ内の関数は、私がangularjsで初心者です、私は、コードを書いているangularjs</p> <p>内のHTMLから、コントローラで定義される関数を呼び出す方法を知っておく必要があり

First.html 

<input type="text" ng-model="model.name" name="name" /> 

Second.html 

<p g-bind-template>{{model.familyname}}</p> // it displays the value 
<div data-ng-controller="formCtrl" data-ng-init="init()"> 
     </div> 

この方法は正しいですか、他の方法で関数を呼び出すことはできますか?また、initは()が呼び出されるスコープ変数は

$scope.init = function() { 
     alert($scope.model.name); // it displays undefined 

    }; 

を定義されていないすべてのヘルプは非常に

+0

これは(あなたの質問を編集する前に)関数を呼び出す方法ですが、通常は 'ng-init'を使う必要はありません。 '$ scope.model.name'の値をどこで定義しましたか?あなたが示したことから、それが未定義であることは不思議ではありません。それが期待されるものです。 – Lex

+0

@Lex、私の質問を編集しました –

+0

@Lex in one html私は名前を取得しています。次のhtmlに表示します。htmlで表示していますが、コントローラでは未定義です。 –

答えて

0

ngInitディレクティブが式を実行し、スコープ変数を割り当てるために意図されて認識されます。ドキュメントを使用することについての素晴らしい警告があります:

この指示は、テンプレートに不必要な量のロジックを追加するために悪用される可能性があります。以下のデモで見られるように、ngRepeatの特殊なプロパティをエイリアスするなど、ngInitを適切に使用するのはほんのわずかです。サーバー側のスクリプトを使用してデータを注入するためのものです。これらのほとんどの場合のほかに、ngInitではなくコントローラを使用してスコープの値を初期化する必要があります。

https://docs.angularjs.org/api/ng/directive/ngInit

代わりngInitを使用して、私は、コントローラ内の関数を実行することをお勧め:

controllerFunction($scope) { 
    $scope.someFunction = someboundfunction; 
    //etc... 

    activate(); 

    function activate() { 
     // do some activation stuff 
    } 

    function someboundfunction() { 
     //... 
    } 
} 

上部に結合可能なメンバーを配置するコーディングスタイル、とき狂気に行くから私を続けていますアクティベーションロジックを持つ大きなコントローラを作成します。興味があればhereです。

0

このコントローラの内部で使用したいものをそのまま使用する必要があります。

angular.module('TestApp', []); 
 

 
angular.module('TestApp') 
 
    .controller('formCtrl', ['$scope', '$window', function($scope, $window) { 
 
    $scope.model = { 
 
     name: 'Default name' 
 
    }; 
 

 
    $scope.alertName = function(where) {   
 
     alert(where + ': ' + $scope.model.name); 
 
    }; 
 

 
    $window.onload = function() { 
 
     // will be called after ng-init 
 
     $scope.alertName('On Load'); 
 
    }; 
 
    
 
    // call it directly from controller 
 
    $scope.alertName('From controller'); 
 
    }]);
<html ng-app="TestApp" ng-controller="formCtrl" ng-init="alertName('Ng-init')"> 
 
    <head></head> 
 
    <body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <div> 
 
     <input type="text" ng-model="model.name" /> 
 
     <button ng-click="alertName()">Alert this name</button> 
 
     <p>{{ model.name }}</p> 
 
    </div> 
 

 
    </body> 
 
</html>

+0

次のhtmlで実際にモデルが必要です。名前をつけてhtmlの関数を呼び出すと、その関数にはその名前が必要ですなぜ定義されていないのが表示されますか –

+0

@Java_NewBie 1つの親コントローラの下に複数のhtmlを関連付けることができます。その後、これらの変数は、必要な方法でhtmlからアクセスできます。 –

+0

コントローラフォームhtmlで書かれた関数を呼び出す方法。ページロードで言うことができる –

0

AngularJSの魔法の世界へようこそ。角度は最初は少し圧倒されるかもしれませんが、あきらめないでください。あなたは正しい方向に進んでいます。

あなたが書いたコードのいくつかの提案 - - コントローラとの間でデータを処理できるように、コントローラ内に完全なコードをカプセル化する必要があります。 - ng-appやその他のng-someNameを使用してアプリケーションを初期化済みであると仮定しています - ng-initはパラメータ/メソッドの初期化に使用されるため、コード内でそのように言及する必要はありません。 $スコープは(それは右、クールだ!)自動的にそれの世話をします

だからあなたのコードは、以下の上記の提案を実施した後、何かのようになります - // htmlコード

{{ユーザー名}}

//angular.js 
app.controller('formCtrl', function($scope) { 
    $scope.Username = ''; 
}); 

魔法を始める!;)

関連する問題