NG-モデルはところで2つのディレクティブ（イオン）この問題を解決するための方法

http://play.ionic.io/app/81ff26fc9a28 NG-モデルはところで2つのディレクティブ（イオン）この問題を解決するための方法

<body ng-app="app"> 
    <ion-pane ng-controller="myCtrl"> 
     <ion-header-bar class="bar-stable"> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <input ng-model="myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search"/> 


     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <ion-footer-bar ng-show="!loading" align-title="center"> 
    <div class="padding" style="position:absolute;bottom:0;width:100%"> 
     <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button> 
    </div> 
    </ion-footer-bar> 


     </ion-content> 

     <ion-footer-bar ng-show="!loading" align-title="center"> 
    <div class="padding" style="position:absolute;bottom:0;width:100%"> 
     <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button> 
    </div> 
    </ion-footer-bar> 


    </ion-pane> 
    </body>

動作しませんか？私はクリックイベントと入力フィールドを2つの異なるディレクティブに入れなければなりませんが、それは問題を引き起こし、ng-modelの値を取得できませんでした。 $scope.myInput値が正しく共有されないよう

出典

2016-05-13 Jamie Jordan

郵便関連するコード、ちょうど別のサイトへのリンクを与えることはありません。 – Yatrix

@Yatrix okが私の質問を更新しました –

これは、固定コードhttp://play.ionic.io/app/77035b24f58a

問題が$scope両者のボタンが異なるあります。

$scope.model = {};を追加し、ng-model="model.myInput"とng-click="search(model.myInput)"のようなモデルオブジェクトを参照してください。次に、内部スコープは同じmodelオブジェクトにアクセスします。

これは、これは$scopeを使用して問題となる場合である簡略化コードこの問題をデモする

var scope = {}; 
scope.myInput = '1'; 
var innerScope = Object.create(scope); 
console.log(innerScope.myInput); // 1 
innerScope.myInput = '2'; // myInput is 2 on innerScope 
console.log(innerScope.myInput); // 2 
console.log(scope.myInput); // 1 <-- but still 1 on scope 

scope.model = {}; 
scope.model.myInput = '1'; 
console.log(innerScope.model.myInput); // 1 
innerScope.model.myInput = '2'; // 
console.log(innerScope.model.myInput); // 2 
console.log(scope.model.myInput); // 2 <-- modify model.Input is visible on parent scope because they are modifying a same model object

出典

2016-05-13 01:49:44

あります。考えられる解決策の1つは、代わりにControllerAs syntaxを使用することです。

ControllerAs構文を使用すると、特定の関数またはプロパティがどのコントローラに属しているかを簡単に特定でき、prototype inheritance issuesを避けて、角度に対して「常にドットを使用する」ルールを強制します。

これはこの問題を解決する唯一の方法ではありませんが、これは$scopeに関連する問題の少ないより堅牢なアプリケーションを構築するのに役立つソリューションです。

http://play.ionic.io/app/df429e85d209

angular.module('app', ['ionic']) 
 

 

 

 
.controller('myCtrl', function() { 
 
    var ctrl = this; 
 
    ctrl.search = function(value) { 
 
    alert(value); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <ion-pane ng-controller="myCtrl as ctrl"> 
 
    <ion-header-bar class="bar-stable"> 
 
    </ion-header-bar> 
 
    <ion-content class="padding"> 
 
     <input ng-model="ctrl.myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search" /> 
 

 

 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <ion-footer-bar ng-show="!loading" align-title="center"> 
 
     <div class="padding" style="position:absolute;bottom:0;width:100%"> 
 
      <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button> 
 
     </div> 
 
     </ion-footer-bar> 
 

 

 
    </ion-content> 
 

 
    <ion-footer-bar ng-show="!loading" align-title="center"> 
 
     <div class="padding" style="position:absolute;bottom:0;width:100%"> 
 
     <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button> 
 
     </div> 
 
    </ion-footer-bar> 
 

 

 
    </ion-pane> 
 
</body> 
 

 
</html>

出典

2016-05-13 01:53:20 Claies

NG-モデルはところで2つのディレクティブ（イオン）この問題を解決するための方法

答えて

関連する問題